Progress

app/javascript/gabsocial/components/block.js

@@ -0,0 +1,11 @@
+export default class Block extends PureComponent {
+  render() {
+    const { children } = this.props
+
+    return (
+      <div className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.borderColorSecondary, _s.border1PX].join(' ')}>
+        {children}
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js

@@ -1,6 +1,5 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import Column from '../column';
-import { ColumnHeader } from '../column_header';
 import IconButton from '../icon_button';
 
 const messages = defineMessages({
@@ -26,7 +25,6 @@ class BundleColumnError extends PureComponent {
 
     return (
       <Column>
-        <ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
         <div className='error-column'>
           <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
           {formatMessage(messages.body)}

app/javascript/gabsocial/components/button.js

@@ -35,6 +35,7 @@ export default class Button extends PureComponent {
     outline: PropTypes.bool,
     narrow: PropTypes.bool,
     underlineOnHover: PropTypes.bool,
+    radiusSmall: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -56,7 +57,7 @@ export default class Button extends PureComponent {
     this.node.focus()
   }
 
-  render () {
+  render() {
     const {
       block,
       className,
@@ -74,6 +75,7 @@ export default class Button extends PureComponent {
       backgroundColor,
       underlineOnHover,
       narrow,
+      radiusSmall,
       ...otherProps
     } = this.props
 
@@ -90,6 +92,7 @@ export default class Button extends PureComponent {
       backgroundColorPrimary: backgroundColor === COLORS.white,
       backgroundColorBrand: backgroundColor === COLORS.brand,
       backgroundTransparent: backgroundColor === COLORS.none,
+      backgroundSubtle2: backgroundColor === COLORS.tertiary,
 
       colorPrimary: color === COLORS.primary,
       colorSecondary: color === COLORS.secondary,
@@ -100,6 +103,7 @@ export default class Button extends PureComponent {
       border1PX: outline,
 
       circle: !text,
+      radiusSmall: radiusSmall,
 
       paddingVertical5PX: narrow,
       paddingVertical10PX: !text && !narrow,
@@ -109,6 +113,8 @@ export default class Button extends PureComponent {
 
       underline_onHover: underlineOnHover,
 
+      backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary,
+
       backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
 
       backgroundColorBrand_onHover: color === COLORS.brand && outline,
@@ -124,19 +130,25 @@ export default class Button extends PureComponent {
       </Fragment>
     ) : children
 
-    return React.createElement(
+    const options = {
-      tagName,
+      className: classes,
-      {
+      ref: this.setRef,
-        className: classes,
+      disabled: disabled,
-        ref: this.setRef,
+      to: to || undefined,
-        disabled: disabled,
+      href: href || undefined,
-        to: to || undefined,
+      onClick: this.handleClick || undefined,
-        to: href || undefined,
+    }
-        onClick: this.handleClick || undefined,
+
-        ...otherProps
+    if (tagName === 'NavLink' && !!to) {
-      },
+      console.log("to: ", to)
-      theChildren,
+      return (
-    )
+        <NavLink {...options}>
+          {theChildren}
+        </NavLink>
+      )
+    }
+
+    return React.createElement(tagName, options, theChildren)
   }
 
 }

app/javascript/gabsocial/components/column/column.js

@@ -1,5 +1,4 @@
 import { isMobile } from '../../utils/is_mobile';
-import { ColumnHeader } from '../column_header';
 
 export default class Column extends PureComponent {
 
@@ -20,9 +19,6 @@ export default class Column extends PureComponent {
 
     const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
     const columnHeaderId = showHeading && heading.replace(/ /g, '-');
-    const header = showHeading && (
-      <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
-    );
 
     return (
       <div role='region' aria-labelledby={columnHeaderId} className={[_s.default].join(' ')}>

app/javascript/gabsocial/components/column_header.js

@@ -1,4 +1,5 @@
 import { injectIntl, defineMessages } from 'react-intl'
+import TabBar from './tab_bar'
 import Icon from './icon'
 import Button from './button'
 import Heading from './heading'
@@ -23,6 +24,7 @@ class ColumnHeader extends PureComponent {
     children: PropTypes.node,
     showBackBtn: PropTypes.bool,
     actions: PropTypes.array,
+    tabs: PropTypes.array,
   }
 
   state = {
@@ -49,7 +51,7 @@ class ColumnHeader extends PureComponent {
   }
 
   render() {
-    const { title, showBackBtn, icon, active, children, actions, intl: { formatMessage } } = this.props
+    const { title, showBackBtn, tabs, icon, active, children, actions, intl: { formatMessage } } = this.props
     const { collapsed } = this.state
 
     return (
@@ -61,12 +63,17 @@ class ColumnHeader extends PureComponent {
           </button>
         }
 
-        <div className={[_s.default, _s.height100PC, _s.justifyContentCenter].join(' ')}>
+        <div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.marginRight10PX].join(' ')}>
           <Heading size='h1'>
             {title}
           </Heading>
         </div>
 
+        {
+          !!tabs &&
+          <TabBar tabs={tabs} />
+        }
+
         {
           !!actions &&
           <div className={[_s.default, _s.backgroundTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.marginLeftAuto].join(' ')}>

app/javascript/gabsocial/components/group_collection_item.js

@@ -0,0 +1,123 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { Fragment } from 'react'
+import { NavLink } from 'react-router-dom'
+import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames/bind'
+import { shortNumberFormat } from '../utils/numbers'
+import Image from './image'
+import Text from './text'
+import Button from './button'
+import DotTextSeperator from './dot_text_seperator'
+
+const messages = defineMessages({
+  members: { id: 'groups.card.members', defaultMessage: 'Members' },
+  new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
+  no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
+})
+
+const mapStateToProps = (state, { id }) => ({
+  group: state.getIn(['groups', id]),
+  relationships: state.getIn(['group_relationships', id]),
+})
+
+const cx = classNames.bind(_s)
+
+export default
+@connect(mapStateToProps)
+@injectIntl
+class GroupCollectionItem extends ImmutablePureComponent {
+  static propTypes = {
+    group: ImmutablePropTypes.map,
+    relationships: ImmutablePropTypes.map,
+  }
+
+  render() {
+    const { intl, group, relationships } = this.props
+
+    if (!relationships) return null
+
+    const unreadCount = relationships.get('unread_count')
+
+    const subtitle = unreadCount > 0 ? (
+      <Fragment>
+        {shortNumberFormat(unreadCount)}
+        &nbsp;
+        {intl.formatMessage(messages.new_statuses)}
+      </Fragment>
+    ) : intl.formatMessage(messages.no_recent_activity)
+
+    const imageHeight = '200px'
+
+    // : todo :
+    const isMember = false
+
+    const outsideClasses = cx({
+      default: 1,
+      width50PC: 1,
+    })
+
+    const navLinkClasses = cx({
+      default: 1,
+      noUnderline: 1,
+      overflowHidden: 1,
+      borderColorSecondary: 1,
+      radiusSmall: 1,
+      border1PX: 1,
+      marginBottom10PX: 1,
+      marginLeft5PX: 1,
+      marginRight5PX: 1,
+      backgroundColorPrimary: 1,
+      backgroundSubtle_onHover: isMember,
+    })
+
+    return (
+      <div className={outsideClasses}>
+        <NavLink
+          to={`/groups/${group.get('id')}`}
+          className={navLinkClasses}
+        >
+          <Image
+            src={group.get('cover')}
+            alt={group.get('title')}
+            height={imageHeight}
+          />
+
+          <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical10PX].join(' ')}>
+            <Text color='primary' size='medium' weight='bold'>
+              {group.get('title')}
+            </Text>
+
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.marginTop5PX].join(' ')}>
+              <Text color='secondary' size='small'>
+                {shortNumberFormat(group.get('member_count'))}
+                &nbsp;
+              {intl.formatMessage(messages.members)}
+              </Text>
+              <DotTextSeperator />
+              <Text color='secondary' size='small' className={_s.marginLeft5PX}>
+                {subtitle}
+              </Text>
+            </div>
+          </div>
+
+          {
+            !isMember &&
+            <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX].join(' ')}>
+              <Button
+                color='primary'
+                backgroundColor='tertiary'
+                radiusSmall
+              >
+                <Text color='inherit' weight='bold'>
+                  Join
+                </Text>
+              </Button>
+            </div>
+          }
+
+        </NavLink>
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/group_list_item.js

@@ -3,11 +3,13 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames/bind'
 import { shortNumberFormat } from '../utils/numbers'
 import Image from './image'
 import Text from './text'
 
 const messages = defineMessages({
+  members: { id: 'groups.card.members', defaultMessage: 'Members' },
   new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
   no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
 })
@@ -17,6 +19,8 @@ const mapStateToProps = (state, { id }) => ({
   relationships: state.getIn(['group_relationships', id]),
 })
 
+const cx = classNames.bind(_s)
+
 export default
 @connect(mapStateToProps)
 @injectIntl
@@ -24,23 +28,17 @@ class GroupListItem extends ImmutablePureComponent {
   static propTypes = {
     group: ImmutablePropTypes.map,
     relationships: ImmutablePropTypes.map,
+    slim: PropTypes.bool,
+    isLast: PropTypes.bool,
   }
 
-  state = {
+  static defaultProps = {
-    hovering: false,
+    slim: false,
-  }
+    isLast: false,
-
-  handleOnMouseEnter = () => {
-    this.setState({ hovering: true })
-  }
-
-  handleOnMouseLeave = () => {
-    this.setState({ hovering: false })
   }
 
   render() {
-    const { intl, group, relationships } = this.props
+    const { intl, group, relationships, slim, isLast } = this.props
-    const { hovering } = this.state
 
     if (!relationships) return null
 
@@ -54,25 +52,65 @@ class GroupListItem extends ImmutablePureComponent {
       </Fragment>
     ) : intl.formatMessage(messages.no_recent_activity)
 
+    const containerClasses = cx({
+      default: 1,
+      noUnderline: 1,
+      overflowHidden: 1,
+      backgroundSubtle_onHover: 1,
+      borderColorSecondary: 1,
+      radiusSmall: !slim,
+      marginTop5PX: !slim,
+      marginBottom10PX: !slim,
+      border1PX: !slim,
+      borderBottom1PX: slim && !isLast,
+      flexRow: slim,
+      paddingVertical5PX: slim,
+    })
+
+    const imageClasses = cx({
+      height122PX: !slim,
+      radiusSmall: slim,
+      height72PX: slim,
+      width72PX: slim,
+      marginLeft15PX: slim,
+    })
+
+    const textContainerClasses = cx({
+      default: 1,
+      paddingHorizontal10PX: 1,
+      marginTop5PX: 1,
+      marginBottom10PX: !slim,
+    })
+
     return (
       <NavLink
         to={`/groups/${group.get('id')}`}
-        className={[_s.default, _s.noUnderline, _s.marginTop5PX, _s.overflowHidden, _s.radiusSmall, _s.marginBottom10PX, _s.border1PX, _s.borderColorSecondary, _s.backgroundSubtle_onHover].join(' ')}
+        className={containerClasses}
-        onMouseEnter={() => this.handleOnMouseEnter()}
-        onMouseLeave={() => this.handleOnMouseLeave()}
       >
         <Image
           src={group.get('cover')}
           alt={group.get('title')}
-          className={_s.height122PX}
+          className={imageClasses}
         />
-        <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical5PX].join(' ')}>
+
-          <Text color='brand' weight='bold' underline={hovering}>
+        <div className={textContainerClasses}>
+          <Text color='brand' weight='bold'>
             {group.get('title')}
           </Text>
-          <Text color='secondary' size='small' className={_s.marginVertical5PX}>
+
+          {
+            slim &&
+            <Text color='secondary' size='small' className={_s.marginTop5PX}>
+              {shortNumberFormat(group.get('member_count'))}
+              &nbsp;
+              {intl.formatMessage(messages.members)}
+            </Text>
+          }
+
+          <Text color='secondary' size='small' className={_s.marginTop5PX}>
             {subtitle}
           </Text>
+
         </div>
       </NavLink>
     )

app/javascript/gabsocial/components/layouts/default_layout.js

@@ -6,13 +6,17 @@ import Sidebar from '../sidebar'
 export default class DefaultLayout extends PureComponent {
   static propTypes = {
     actions: PropTypes.array,
+    tabs: PropTypes.array,
     layout: PropTypes.object,
     title: PropTypes.string,
     showBackBtn: PropTypes.bool,
   }
 
   render() {
-    const { children, title, showBackBtn, layout, actions } = this.props
+    const { children, title, showBackBtn, layout, actions, tabs } = this.props
+
+    // const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
+    // const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
 
     return (
       <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
@@ -24,7 +28,12 @@ export default class DefaultLayout extends PureComponent {
           <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
             <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width645PX].join(' ')}>
-                <ColumnHeader title={title} showBackBtn={showBackBtn} actions={actions} />
+                <ColumnHeader
+                  title={title}
+                  showBackBtn={showBackBtn}
+                  actions={actions}
+                  tabs={tabs}
+                />
               </div>
               <div className={[_s.default, _s.width340PX].join(' ')}>
                 <Search />

app/javascript/gabsocial/components/layouts/profile_layout.js

@@ -1,4 +1,3 @@
-import ColumnHeader from '../column_header'
 import Sidebar from '../sidebar'
 
 export default class ProfileLayout extends PureComponent {

app/javascript/gabsocial/components/layouts/search_layout.js

@@ -0,0 +1,68 @@
+import Sticky from 'react-stickynode'
+import Search from '../search'
+import ColumnHeader from '../column_header'
+import Sidebar from '../sidebar'
+
+export default class SearchLayout extends PureComponent {
+  static propTypes = {
+    actions: PropTypes.array,
+    tabs: PropTypes.array,
+    layout: PropTypes.object,
+    title: PropTypes.string,
+    showBackBtn: PropTypes.bool,
+  }
+
+  render() {
+    const { children, title, showBackBtn, layout, actions, tabs } = this.props
+
+    // const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
+    // const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
+
+    return (
+      <div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
+
+        <Sidebar />
+
+        <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
+
+          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
+            <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+              <div className={[_s.default, _s.width645PX].join(' ')}>
+                <ColumnHeader
+                  title={title}
+                  showBackBtn={showBackBtn}
+                  actions={actions}
+                  tabs={tabs}
+                />
+              </div>
+              <div className={[_s.default, _s.width340PX].join(' ')}>
+                <Search />
+              </div>
+            </div>
+          </div>
+
+          <div className={[_s.default, _s.height53PX].join(' ')}></div>
+
+          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
+            <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
+              <div className={_s.default}>
+                {children}
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.width340PX].join(' ')}>
+              <Sticky top={73} enabled>
+                <div className={[_s.default, _s.width340PX].join(' ')}>
+                  {layout}
+                </div>
+              </Sticky>
+            </div>
+          </div>
+
+        </main>
+
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/list.js

@@ -1,3 +1,4 @@
+import Block from './block'
 import ScrollableList from './scrollable_list'
 import ListItem from './list_item'
 
@@ -13,7 +14,7 @@ export default class List extends PureComponent {
     const { items, scrollKey, emptyMessage } = this.props
 
     return (
-      <div className={[_s.default, _s.backgroundColorPrimary, _s.radiusSmall, _s.overflowHidden, _s.border1PX, _s.borderColorSecondary].join(' ')}>
+      <Block>
         <ScrollableList
           scrollKey={scrollKey}
           emptyMessage={emptyMessage}
@@ -31,7 +32,7 @@ export default class List extends PureComponent {
             })
           }
         </ScrollableList>
-      </div>
+      </Block>
     )
   }
 

app/javascript/gabsocial/components/panel/groups_panel.js

@@ -20,26 +20,35 @@ export default @connect(mapStateToProps)
 class GroupSidebarPanel extends ImmutablePureComponent {
   static propTypes = {
     groupIds: ImmutablePropTypes.list,
+    slim: PropTypes.bool,
   }
 
   render() {
-    const { intl, groupIds } = this.props
+    const { intl, groupIds, slim } = this.props
     const count = groupIds.count()
 
     if (count === 0) return null
 
+    const maxCount = slim ? 12 : 6
+
     return (
       <PanelLayout
         title={intl.formatMessage(messages.title)}
         headerButtonTitle={intl.formatMessage(messages.all)}
         headerButtonTo='/groups/browse/member'
-        footerButtonTitle={count > 6 ? intl.formatMessage(messages.show_all) : undefined}
+        footerButtonTitle={count > maxCount ? intl.formatMessage(messages.show_all) : undefined}
-        footerButtonTo={count > 6 ? '/groups/browse/member' : undefined}
+        footerButtonTo={count > maxCount ? '/groups/browse/member' : undefined}
+        noPadding={slim}
       >
         <div className={_s.default}>
           {
-            groupIds.slice(0, 6).map(groupId => (
+            groupIds.slice(0, maxCount).map((groupId, i) => (
-              <GroupListItem key={`group-panel-item-${groupId}`} id={groupId} />
+              <GroupListItem
+                key={`group-panel-item-${groupId}`}
+                id={groupId}
+                slim={slim}
+                isLast={groupIds.length - 1 === i}
+              />
             ))
           }
         </div>

app/javascript/gabsocial/components/panel/panel_layout.js

@@ -1,3 +1,4 @@
+import Block from '../block'
 import Heading from '../heading'
 import Button from '../button'
 import Text from '../text'
@@ -31,68 +32,70 @@ export default class PanelLayout extends PureComponent {
     } = this.props
 
     return (
-      <aside className={[_s.default, _s.backgroundColorPrimary, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.borderColorSecondary, _s.border1PX].join(' ')}>
+      <aside className={[_s.default, _s.marginBottom15PX].join(' ')}>
-        {
+        <Block>
-          (title || subtitle) &&
+          {
-          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+            (title || subtitle) &&
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
-              <Heading size='h3'>
+              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-                {title}
+                <Heading size='h3'>
-              </Heading>
+                  {title}
+                </Heading>
+                {
+                  (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
+                  <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
+                    <Button
+                      text
+                      backgroundColor='none'
+                      color='brand'
+                      to={headerButtonTo}
+                      onClick={headerButtonAction}
+                    >
+                      <Text size='small' color='inherit' weight='bold'>
+                        {headerButtonTitle}
+                      </Text>
+                    </Button>
+                  </div>
+                }
+              </div>
               {
-                (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
+                subtitle &&
-                <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
+                <Heading size='h4'>
-                  <Button
+                  {subtitle}
-                    text
+                </Heading>
-                    backgroundColor='none'
-                    color='brand'
-                    to={headerButtonTo}
-                    onClick={headerButtonAction}
-                  >
-                    <Text size='small' color='inherit' weight='bold'>
-                      {headerButtonTitle}
-                    </Text>
-                  </Button>
-                </div>
               }
             </div>
-            {
+          }
-              subtitle &&
-              <Heading size='h4'>
-                {subtitle}
-              </Heading>
-            }
-          </div>
-        }
 
-        {
+          {
-          !noPadding &&
+            !noPadding &&
-          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+            <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
-            {children}
+              {children}
-          </div>
+            </div>
-        }
+          }
 
-        {
+          {
-          noPadding && children
+            noPadding && children
-        }
+          }
 
-        {
+          {
-          (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
+            (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo)) &&
-          <div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
+            <div className={[_s.default, _s.borderColorSecondary, _s.borderTop1PX].join(' ')}>
-          <Button
+              <Button
-            text
+                text
-            color='none'
+                color='none'
-            backgroundColor='none'
+                backgroundColor='none'
-            to={footerButtonTo}
+                to={footerButtonTo}
-            onClick={footerButtonAction}
+                onClick={footerButtonAction}
-            className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
+                className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
-          >
+              >
-            <Text color='brand' align='left' size='medium'>
+                <Text color='brand' align='left' size='medium'>
-              {footerButtonTitle}
+                  {footerButtonTitle}
-            </Text>
+                </Text>
-          </Button>
+              </Button>
-          </div>
+            </div>
-        }
+          }
+        </Block>
       </aside>
     )
   }

app/javascript/gabsocial/components/sidebar.js

@@ -6,9 +6,9 @@ import Button from './button'
 import { closeSidebar } from '../actions/sidebar'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
-import GabLogo from './assets/gab_logo'
 import SidebarSectionTitle from './sidebar_section_title'
 import SidebarSectionItem from './sidebar_section_item'
+import SidebarHeader from './sidebar_header'
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -103,6 +103,11 @@ class Sidebar extends ImmutablePureComponent {
         to: '/',
         count: 124,
       },
+      {
+        title: 'Search',
+        icon: 'search-sidebar',
+        to: '/search',
+      },
       {
         title: 'Notifications',
         icon: 'notifications',
@@ -131,6 +136,11 @@ class Sidebar extends ImmutablePureComponent {
       },
     ]
 
+    // more:
+    // settings/preferences
+    // help
+    // logout
+
     const shortcutItems = [
       {
         title: 'Meme Group',
@@ -175,17 +185,7 @@ class Sidebar extends ImmutablePureComponent {
           <div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
             <div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
 
-              <h1 className={[_s.default].join(' ')}>
+              <SidebarHeader />
-                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
-                  <GabLogo />
-                </NavLink>
-              </h1>
-
-              <SidebarSectionItem
-                image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139'
-                title='@admin'
-                to='/profile'
-              />
 
               <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
                 <SidebarSectionTitle>Menu</SidebarSectionTitle>

app/javascript/gabsocial/components/sidebar_header.js

@@ -1,343 +1,47 @@
+import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { injectIntl, defineMessages } from 'react-intl'
-import classNames from 'classnames/bind'
-import Button from './button'
-import { closeSidebar } from '../actions/sidebar'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
-// import ProgressPanel from './progress_panel'
 import GabLogo from './assets/gab_logo'
-import Icon from './icon'
+import SidebarSectionItem from './sidebar_section_item'
-
-const messages = defineMessages({
-  followers: { id: 'account.followers', defaultMessage: 'Followers' },
-  follows: { id: 'account.follows', defaultMessage: 'Follows' },
-  profile: { id: 'account.profile', defaultMessage: 'Profile' },
-  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
-  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
-  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
-  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
-  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
-  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
-  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
-  lists: { id: 'column.lists', defaultMessage: 'Lists', },
-  apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
-  more: { id: 'sidebar.more', defaultMessage: 'More' },
-  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
-  trends: { id: 'promo.trends', defaultMessage: 'Trends' },
-  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' },
-})
 
 const mapStateToProps = state => {
   const getAccount = makeGetAccount()
 
   return {
     account: getAccount(state, me),
-    sidebarOpen: state.get('sidebar').sidebarOpen,
   }
 }
 
-const mapDispatchToProps = (dispatch) => ({
+export default @connect(mapStateToProps)
-  onClose() {
+class SidebarHeader extends ImmutablePureComponent {
-    dispatch(closeSidebar())
-  },
-})
-
-const cx = classNames.bind(_s)
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class Sidebar extends ImmutablePureComponent {
 
   static propTypes = {
-    intl: PropTypes.object.isRequired,
     account: ImmutablePropTypes.map,
-    sidebarOpen: PropTypes.bool,
-    onClose: PropTypes.func.isRequired,
-  }
-
-  state = {
-    moreOpen: false,
-    hoveringItemIndex: null,
-  }
-
-  componentDidUpdate() {
-    if (!me) return
-
-    if (this.props.sidebarOpen) {
-      document.body.classList.add('with-modals--active')
-    } else {
-      document.body.classList.remove('with-modals--active')
-    }
-  }
-
-  toggleMore = () => {
-    this.setState({
-      moreOpen: !this.state.moreOpen
-    })
-  }
-
-  handleSidebarClose = () => {
-    this.props.onClose()
-    this.setState({
-      moreOpen: false,
-    })
   }
 
   render() {
-    const { sidebarOpen, intl, account } = this.props
+    const { account } = this.props
-    const { moreOpen, hoveringItemIndex } = this.state
-
-    if (!me || !account) return null
-
-    const acct = account.get('acct')
-    const isPro = account.get('is_pro')
-
-    // const classes = classNames('sidebar-menu__root', {
-    //   'sidebar-menu__root--visible': sidebarOpen,
-    // })
-
-    const moreIcon = moreOpen ? 'minus' : 'plus'
-    const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
-
-    const menuItems = [
-      {
-        title: 'Home',
-        icon: 'home',
-        to: '/',
-        count: 124,
-      },
-      {
-        title: 'Notifications',
-        icon: 'notifications',
-        to: '/notifications',
-        count: 40,
-      },
-      {
-        title: 'Groups',
-        icon: 'group',
-        to: '/groups',
-      },
-      {
-        title: 'Lists',
-        icon: 'list',
-        to: '/lists',
-      },
-      {
-        title: 'Chat',
-        icon: 'chat',
-        to: '/',
-      },
-      {
-        title: 'More',
-        icon: 'more',
-        to: '/',
-      },
-    ]
-
-    const shortcutItems = [
-      {
-        title: 'Meme Group',
-        icon: 'group',
-        to: '/',
-        count: 0,
-      },
-      {
-        title: '@andrew',
-        image: 'http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139',
-        to: '/',
-        count: 3,
-      },
-    ]
-
-    const exploreItems = [
-      {
-        title: 'Apps',
-        icon: 'apps',
-        to: '/',
-      },
-      {
-        title: 'Shop',
-        icon: 'shop',
-        to: '/',
-      },
-      {
-        title: 'Trends',
-        icon: 'trends',
-        to: '/',
-      },
-      {
-        title: 'Dissenter',
-        icon: 'dissenter',
-        to: '/',
-      },
-    ]
-
-    const titleClasses = cx({
-      default: 1,
-      text: 1,
-      colorSecondary: 1,
-      displayBlock: 1,
-      fontSize13PX: 1,
-      paddingVertical5PX: 1,
-      marginTop10PX: 1,
-      paddingHorizontal10PX: 1,
-      fontWeightBold: 1,
-    })
 
     return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
+      <Fragment>
-        <div className={[_s.default, _s.width240PX].join(' ')}>
+        <h1 className={[_s.default].join(' ')}>
-          <div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
+          <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
+            <GabLogo />
-              <h1 className={[_s.default].join(' ')}>
+          </NavLink>
-                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
+        </h1>
-                  <GabLogo />
-                </NavLink>
-              </h1>
-              <div>
-                <HeaderMenuItem me image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139' title='@admin' to='/profile' />
-              </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
-                <span className={titleClasses}>Menu</span>
-                {
-                  menuItems.map((menuItem, i) => (
-                    <HeaderMenuItem {...menuItem} key={`header-item-menu-${i}`} />
-                  ))
-                }
-                <span className={titleClasses}>Shortcuts</span>
-                {
-                  shortcutItems.map((shortcutItem, i) => (
-                    <HeaderMenuItem {...shortcutItem} key={`header-item-shortcut-${i}`} />
-                  ))
-                }
-                <span className={titleClasses}>Explore</span>
-                {
-                  exploreItems.map((exploreItem, i) => (
-                    <HeaderMenuItem {...exploreItem} key={`header-item-explore-${i}`} />
-                  ))
-                }
-              </nav>
-              <Button block className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}>
-                Gab
-              </Button>
-            </div>
-          </div>
-        </div>
-      </header>
-    )
-  }
 
-}
+        {
-
+          (!!me && !!account) &&
-class HeaderMenuItem extends PureComponent {
+          <SidebarSectionItem
-  static propTypes = {
+            image={account.get('avatar')}
-    to: PropTypes.string,
+            title={account.get('acct')}
-    active: PropTypes.bool,
+            to={`/${account.get('acct')}`}
-    icon: PropTypes.string,
+          />
-    image: PropTypes.string,
+        }
-    title: PropTypes.string,
+      </Fragment>
-    me: PropTypes.bool,
-    count: PropTypes.number,
-  }
-
-  state = {
-    hovering: false,
-  }
-
-  handleOnMouseEnter = () => {
-    this.setState({ hovering: true })
-  }
-
-  handleOnMouseLeave = () => {
-    this.setState({ hovering: false })
-  }
-
-  render() {
-    const { to, active, icon, image, title, me, count } = this.props
-    const { hovering } = this.state
-
-    const iconSize = '16px'
-    const shouldShowActive = hovering || active
-    const isNotifications = to === '/notifications'
-
-    const containerClasses = cx({
-      default: 1,
-      maxWidth100PC: 1,
-      width100PC: 1,
-      flexRow: 1,
-      paddingVertical5PX: 1,
-      paddingHorizontal10PX: 1,
-      alignItemsCenter: 1,
-      radiusSmall: 1,
-      // border1PX: shouldShowActive,
-      // borderColorSecondary: shouldShowActive,
-      backgroundSubtle2: shouldShowActive,
-    })
-
-    const textClasses = cx({
-      default: 1,
-      fontWeightNormal: 1,
-      fontSize15PX: 1,
-      text: 1,
-      textOverflowEllipsis: 1,
-      colorPrimary: shouldShowActive || me,
-      colorSecondary: !hovering && !active && !me,
-    })
-
-    const iconClasses = cx({
-      fillColorBlack: shouldShowActive,
-      fillcolorSecondary: !hovering && !active,
-    })
-
-    const countClasses = cx({
-      default: 1,
-      text: 1,
-      marginLeftAuto: 1,
-      fontSize12PX: 1,
-      paddingHorizontal5PX: 1,
-      marginRight2PX: 1,
-      lineHeight15: 1,
-      marginLeft5PX: 1,
-      colorSecondary: !isNotifications,
-      colorWhite: isNotifications,
-      backgroundColorBrand: isNotifications,
-      radiusSmall: isNotifications,
-    })
-
-    return (
-      <NavLink
-        to={to}
-        onMouseEnter={() => this.handleOnMouseEnter()}
-        onMouseLeave={() => this.handleOnMouseLeave()}
-        className={[_s.default, _s.noUnderline, _s.cursorPointer, _s.width100PC, _s.alignItemsStart, _s.flexGrow1].join(' ')}
-      >
-        <div className={containerClasses}>
-          <div className={[_s.default]}>
-            { icon && <Icon id={icon} className={iconClasses} width={iconSize} height={iconSize} /> }
-            { image &&
-              <img
-                className={[_s.default, _s.circle].join(' ')}
-                width={iconSize}
-                height={iconSize}
-                src={image}
-              />
-            }
-          </div>
-          <div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
-            <span className={textClasses}>{title}</span>
-          </div>
-          { count > 0 &&
-            <span className={countClasses}>
-              {count}
-            </span>
-          }
-        </div>
-      </NavLink>
     )
   }
 }

app/javascript/gabsocial/components/status/status.js

@@ -14,6 +14,7 @@ import RelativeTimestamp from '../relative_timestamp';
 import DisplayName from '../display_name';
 import StatusContent from '../status_content';
 import StatusActionBar from '../status_action_bar';
+import Block from '../block';
 import Icon from '../icon';
 import Poll from '../poll';
 import StatusHeader from '../status_header'
@@ -257,9 +258,9 @@ class Status extends ImmutablePureComponent {
 
   handleOpenProUpgradeModal = () => {
     this.props.onOpenProUpgradeModal();
-	}
+  }
 
-  render () {
+  render() {
     let media = null;
     let statusAvatar, prepend, rebloggedByText, reblogContent;
 
@@ -424,51 +425,53 @@ class Status extends ImmutablePureComponent {
     return (
       <HotKeys handlers={handlers}>
         <div
-          className={[_s.default, _s.backgroundColorPrimary, _s.radiusSmall, _s.marginBottom15PX, _s.border1PX, _s.borderColorSecondary].join(' ')}
+          className={[_s.default, _s.marginBottom15PX].join(' ')}
           tabIndex={this.props.muted ? null : 0}
           data-featured={featured ? 'true' : null}
           aria-label={textForScreenReader(intl, status, rebloggedByText)}
           ref={this.handleRef}
         >
+          <Block>
 
-          {prepend}
+            {prepend}
 
-          <div
+            <div
-            className={classNames('status', `status-${status.get('visibility')}`, {
+              className={classNames('status', `status-${status.get('visibility')}`, {
-              'status-reply': !!status.get('in_reply_to_id'),
+                'status-reply': !!status.get('in_reply_to_id'),
-              muted: this.props.muted,
+                muted: this.props.muted,
-              read: unread === false,
+                read: unread === false,
-            })}
+              })}
-            data-id={status.get('id')}
+              data-id={status.get('id')}
-          >
+            >
 
-            <StatusHeader status={status} />
+              <StatusHeader status={status} />
 
-            <div className={_s.default}>
+              <div className={_s.default}>
-              <StatusContent
+                <StatusContent
-                status={status}
+                  status={status}
-                reblogContent={reblogContent}
+                  reblogContent={reblogContent}
-                onClick={this.handleClick}
+                  onClick={this.handleClick}
-                expanded={!status.get('hidden')}
+                  expanded={!status.get('hidden')}
-                onExpandedToggle={this.handleExpandedToggle}
+                  onExpandedToggle={this.handleExpandedToggle}
-                collapsable
+                  collapsable
-              />
+                />
-            </div>
+              </div>
 
-            { media }
+              {media}
 
-            { /* status.get('quote') && <StatusQuote
+              { /* status.get('quote') && <StatusQuote
               id={status.get('quote')}
             /> */ }
 
-            { /* showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
+              { /* showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
               <button className='status__content__read-more-button' onClick={this.handleClick}>
                 <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
               </button>
             ) */ }
 
-            <StatusActionBar status={status} account={account} {...other} />
+              <StatusActionBar status={status} account={account} {...other} />
-          </div>
+            </div>
+          </Block>
         </div>
       </HotKeys>
     );

app/javascript/gabsocial/components/tab_bar.js

@@ -0,0 +1,21 @@
+import TabBarItem from './tab_bar_item'
+
+export default class TabBar extends PureComponent {
+  static propTypes = {
+    tabs: PropTypes.array,
+  }
+
+  render() {
+    const { tabs } = this.props
+
+    return (
+      <div className={[_s.default, _s.height53PX, _s.paddingHorizontal5PX, _s.flexRow].join(' ')}>
+        {
+          tabs.map((tab, i) => (
+            <TabBarItem key={`tab-bar-item-${i}`} {...tab} />
+          ))
+        }
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/tab_bar_item.js

@@ -0,0 +1,66 @@
+import { NavLink, withRouter } from 'react-router-dom'
+import classNames from 'classnames/bind'
+import Text from './text'
+
+const cx = classNames.bind(_s)
+
+export default
+@withRouter
+class TabBarItem extends PureComponent {
+  static propTypes = {
+    location: PropTypes.object.isRequired,
+    title: PropTypes.string,
+    to: PropTypes.string,
+  }
+
+  state = {
+    active: -1,
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      const isCurrent = this.props.to === this.props.location.pathname
+
+      if (this.state.active !== isCurrent) {
+        this.setState({
+          active: isCurrent,
+        })
+      }
+    }
+  }
+
+  render() {
+    const { title, to, location } = this.props
+    const { active } = this.state
+
+    const isCurrent = active === -1 ? to === location.pathname : active
+
+    const containerClasses = cx({
+      default: 1,
+      height53PX: 1,
+      noUnderline: 1,
+      text: 1,
+      displayFlex: 1,
+      alignItemsCenter: 1,
+      justifyContentCenter: 1,
+      paddingHorizontal10PX: 1,
+      borderBottom2PX: 1,
+      borderColorTransparent: !isCurrent,
+      borderColorBrand: isCurrent,
+    })
+
+    const textOptions = {
+      size: 'small',
+      color: isCurrent ? 'brand' : 'primary',
+      weight: isCurrent ? 'bold' : 'normal',
+    }
+
+    return (
+      <NavLink to={to} className={containerClasses}>
+        <Text {...textOptions}>
+          {title}
+        </Text>
+      </NavLink>
+    )
+  }
+}

app/javascript/gabsocial/components/timeline_compose_block.js

@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import { injectIntl, defineMessages } from 'react-intl'
 import { me } from '../initial_state'
 import ComposeFormContainer from '../features/compose/containers/compose_form_container'
+import Block from './block'
 import Avatar from './avatar'
 import Heading from './heading'
 
@@ -35,18 +36,20 @@ class TimelineComposeBlock extends ImmutablePureComponent {
     const { account, size, intl, ...rest } = this.props
 
     return (
-      <section className={[_s.default, _s.overflowHidden, _s.radiusSmall, _s.border1PX, _s.borderColorSecondary, _s.backgroundColorPrimary, _s.marginBottom15PX].join(' ')}>
+      <section className={[_s.default, _s.marginBottom15PX].join(' ')}>
-        <div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
+        <Block>
-          <Heading size='h5'>
+          <div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
-            {intl.formatMessage(messages.createPost)}
+            <Heading size='h5'>
-          </Heading>
+              {intl.formatMessage(messages.createPost)}
-        </div>
+            </Heading>
-        <div className={[_s.default, _s.flexRow, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}>
-          <div className={[_s.default, _s.marginRight10PX].join(' ')}>
-            <Avatar account={account} size={46} />
           </div>
-          <ComposeFormContainer {...rest} />
+          <div className={[_s.default, _s.flexRow, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}>
-        </div>
+            <div className={[_s.default, _s.marginRight10PX].join(' ')}>
+              <Avatar account={account} size={46} />
+            </div>
+            <ComposeFormContainer {...rest} />
+          </div>
+        </Block>
       </section>
     )
   }

app/javascript/gabsocial/constants.js

@@ -0,0 +1,84 @@
+'use strict';
+
+import WebSocketClient from 'websocket.js';
+
+const randomIntUpTo = max => Math.floor(Math.random() * Math.floor(max));
+
+export function connectStream(path, pollingRefresh = null, callbacks = () => ({ onConnect() { }, onDisconnect() { }, onReceive() { } })) {
+  return (dispatch, getState) => {
+    const streamingAPIBaseURL = getState().getIn(['meta', 'streaming_api_base_url']);
+    const accessToken = getState().getIn(['meta', 'access_token']);
+    const { onConnect, onDisconnect, onReceive } = callbacks(dispatch, getState);
+
+    let polling = null;
+
+    const setupPolling = () => {
+      pollingRefresh(dispatch, () => {
+        polling = setTimeout(() => setupPolling(), 20000 + randomIntUpTo(20000));
+      });
+    };
+
+    const clearPolling = () => {
+      if (polling) {
+        clearTimeout(polling);
+        polling = null;
+      }
+    };
+
+    const subscription = getStream(streamingAPIBaseURL, accessToken, path, {
+      connected() {
+        if (pollingRefresh) {
+          clearPolling();
+        }
+
+        onConnect();
+      },
+
+      disconnected() {
+        if (pollingRefresh) {
+          polling = setTimeout(() => setupPolling(), randomIntUpTo(40000));
+        }
+
+        onDisconnect();
+      },
+
+      received(data) {
+        onReceive(data);
+      },
+
+      reconnected() {
+        if (pollingRefresh) {
+          clearPolling();
+          pollingRefresh(dispatch);
+        }
+
+        onConnect();
+      },
+
+    });
+
+    const disconnect = () => {
+      if (subscription) {
+        subscription.close();
+      }
+
+      clearPolling();
+    };
+
+    return disconnect;
+  };
+}
+
+
+export default function getStream(streamingAPIBaseURL, accessToken, stream, { connected, received, disconnected, reconnected }) {
+  const params = [`stream=${stream}`];
+
+  const ws = new WebSocketClient(`${streamingAPIBaseURL}/api/v1/streaming/?${params.join('&')}`, accessToken);
+
+  ws.onopen = connected;
+  ws.onmessage = e => received(JSON.parse(e.data));
+  ws.onclose = disconnected;
+  ws.onreconnect = reconnected;
+
+  return ws;
+};

app/javascript/gabsocial/features/community_timeline/community_timeline.js

@@ -10,7 +10,6 @@ import {
 import StatusListContainer from '../../containers/status_list_container';;
 // import ColumnSettingsContainer from '.containers/column_settings_container';
 import Column from '../../components/column';
-// import { HomeColumnHeader } from '../../components/column_header';
 
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Community timeline' },
@@ -100,9 +99,6 @@ class CommunityTimeline extends PureComponent {
 
     return (
       <Column label={intl.formatMessage(messages.title)}>
-        { /* <HomeColumnHeader activeItem='all' active={hasUnread} >
-          <ColumnSettingsContainer />
-        </HomeColumnHeader> */ }
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

app/javascript/gabsocial/features/groups_collection/groups_collection.js

@@ -0,0 +1,44 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { fetchGroups } from '../../actions/groups'
+import Block from '../../components/block'
+import GroupCollectionItem from '../../components/group_collection_item'
+
+const mapStateToProps = (state, { activeTab }) => ({
+	groupIds: state.getIn(['group_lists', activeTab]),
+})
+
+export default @connect(mapStateToProps)
+class GroupsCollection extends ImmutablePureComponent {
+	static propTypes = {
+		activeTab: PropTypes.string.isRequired,
+		dispatch: PropTypes.func.isRequired,
+		groupIds: ImmutablePropTypes.list,
+	}
+
+	componentWillMount() {
+		this.props.dispatch(fetchGroups(this.props.activeTab))
+	}
+
+	componentDidUpdate(oldProps) {
+		if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
+			this.props.dispatch(fetchGroups(this.props.activeTab))
+		}
+	}
+
+	render() {
+		const { groupIds } = this.props
+
+		console.log("groupIds: ", groupIds)
+
+		return (
+			<div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+				{
+					groupIds.map((groupId, i) => (
+						<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
+					))
+				}
+			</div>
+		)
+	}
+}

app/javascript/gabsocial/features/groups_collection/index.js

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

app/javascript/gabsocial/features/groups_directory/groups_directory.js

@@ -1,104 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import { fetchGroups } from '../../../actions/groups';
-import { openModal } from '../../../actions/modal';
-import { me } from '../../../initial_state';
-import GroupCard from './card';
-import GroupCreate from '../create';
-
-const messages = defineMessages({
-	heading: { id: 'column.groups', defaultMessage: 'Groups' },
-	create: { id: 'groups.create', defaultMessage: 'Create group' },
-	tab_featured: { id: 'groups.tab_featured', defaultMessage: 'Featured' },
-	tab_member: { id: 'groups.tab_member', defaultMessage: 'Member' },
-	tab_admin: { id: 'groups.tab_admin', defaultMessage: 'Manage' },
-});
-
-const mapStateToProps = (state, { activeTab }) => ({
-	groupIds: state.getIn(['group_lists', activeTab]),
-	account: state.getIn(['accounts', me]),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Groups extends ImmutablePureComponent {
-	static propTypes = {
-		params: PropTypes.object.isRequired,
-		activeTab: PropTypes.string.isRequired,
-		showCreateForm: PropTypes.bool,
-		dispatch: PropTypes.func.isRequired,
-		groups: ImmutablePropTypes.map,
-		groupIds: ImmutablePropTypes.list,
-		intl: PropTypes.object.isRequired,
-	};
-
-	componentWillMount () {
-		this.props.dispatch(fetchGroups(this.props.activeTab));
-	}
-
-	componentDidUpdate(oldProps) {
-		if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
-			this.props.dispatch(fetchGroups(this.props.activeTab));
-		}
-	}
-
-	handleOpenProUpgradeModal = () => {
-		this.props.dispatch(openModal('PRO_UPGRADE'));
-	}
-
-	renderHeader() {
-		const { intl, activeTab, account, onOpenProUpgradeModal } = this.props;
-
-		const isPro = account.get('is_pro');
-
-		return (
-			<div className="group-column-header">
-				<div className="group-column-header__cta">
-					{
-						account && isPro &&
-						<Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link>
-					}
-					{
-						account && !isPro &&
-						<button onClick={this.handleOpenProUpgradeModal} className="button standard-small">{intl.formatMessage(messages.create)}</button>
-					}
-				</div>
-				<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
-
-				<div className="column-header__wrapper">
-					<h1 className="column-header">
-						<Link to='/groups' className={classNames('btn grouped', {'active': 'featured' === activeTab})}>
-							{intl.formatMessage(messages.tab_featured)}
-						</Link>
-
-						<Link to='/groups/browse/member' className={classNames('btn grouped', {'active': 'member' === activeTab})}>
-							{intl.formatMessage(messages.tab_member)}
-						</Link>
-
-						<Link to='/groups/browse/admin' className={classNames('btn grouped', {'active': 'admin' === activeTab})}>
-							{intl.formatMessage(messages.tab_admin)}
-						</Link>
-					</h1>
-				</div>
-			</div>
-		);
-	}
-
-	render () {
-		const { groupIds, showCreateForm } = this.props;
-
-		return (
-			<div>
-				{!showCreateForm && this.renderHeader()}
-				{showCreateForm && <GroupCreate /> }
-
-				<div className="group-card-list">
-					{groupIds.map(id => <GroupCard key={id} id={id} />)}
-				</div>
-			</div>
-		);
-	}
-}

app/javascript/gabsocial/features/groups_directory/index.js

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

app/javascript/gabsocial/features/hashtag_timeline/hashtag_timeline.js

@@ -4,7 +4,6 @@ import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines';
 import { connectHashtagStream } from '../../actions/streaming';
 import StatusListContainer from '../../containers/status_list_container';
 import Column from '../../components/column';
-import { ColumnHeader } from '../../components/column_header';
 
 const mapStateToProps = (state, props) => ({
   hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}`, 'unread']) > 0,
@@ -104,7 +103,6 @@ class HashtagTimeline extends PureComponent {
 
     return (
       <Column heading={`#${id}`}>
-        <ColumnHeader icon='hashtag' active={hasUnread} title={this.title()} />
         <StatusListContainer
           scrollKey='hashtag_timeline'
           timelineId={`hashtag:${id}`}

app/javascript/gabsocial/features/notifications/notifications.js

@@ -131,6 +131,8 @@ class Notifications extends ImmutablePureComponent {
     //   ? (<FilterBarContainer />)
     //   : null;
 
+    // : todo : include follow requests
+
     console.log("notifications:", notifications)
 
     if (isLoading && this.scrollableContent) {

app/javascript/gabsocial/features/status/status.js

@@ -444,7 +444,7 @@ class Status extends ImmutablePureComponent {
 
     return (
       <Column heading={intl.formatMessage(messages.detailedStatus)}>
-        { me &&
+        { /* me &&
           <ColumnHeader
             extraButton={(
               <button
@@ -461,7 +461,7 @@ class Status extends ImmutablePureComponent {
               </button>
             )}
           />
-        }
+        */ }
 
         <div ref={this.setRef}>
           {ancestors}

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

@@ -15,19 +15,17 @@ import { fetchFilters } from '../../actions/filters';
 import { clearHeight } from '../../actions/height_cache';
 import { openModal } from '../../actions/modal';
 import WrappedRoute from './util/wrapped_route';
-import { isMobile } from '../../utils/is_mobile';
 // import NotificationsContainer from '../../containers/notifications_container';
-// import LoadingBarContainer from '../../containers/loading_bar_container';
 // import ModalContainer from '../../containers/modal_container';
 // import UploadArea from '../../components/upload_area';
-// import FooterBar from '../../components/footer_bar';
 // import TrendsPanel from './components/trends_panel';
 // import { WhoToFollowPanel } from '../../components/panel';
 // import LinkFooter from '../../components/link_footer';
 import ProfilePage from '../../pages/profile_page'
-// import GroupsPage from 'gabsocial/pages/groups_page';
 // import GroupPage from '../../pages/group_page';
-// import SearchPage from '../../pages/search_page';
+import GroupsPage from '../../pages/groups_page'
+import SearchPage from '../../pages/search_page'
+import ErrorPage from '../../pages/error_page'
 import HomePage from '../../pages/home_page'
 import NotificationsPage from '../../pages/notifications_page'
 import ListPage from '../../pages/list_page'
@@ -49,15 +47,15 @@ import {
   // HashtagTimeline,
   Notifications,
   // FollowRequests,
-  // GenericNotFound,
+  GenericNotFound,
   // FavouritedStatuses,
   // Blocks,
   // DomainBlocks,
   // Mutes,
   // PinnedStatuses,
-  // Search,
+  Search,
   // Explore,
-  // Groups,
+  GroupsCollection,
   // GroupTimeline,
   ListTimeline,
   ListsDirectory,
@@ -113,36 +111,7 @@ const keyMap = {
   toggleSensitive: 'h',
 };
 
-const LAYOUT = {
+class SwitchingArea extends PureComponent {
-  // EMPTY: {
-  //   LEFT: null,
-  //   RIGHT: null,
-  // },
-  // DEFAULT: {
-  //   LEFT: [
-  //     <WhoToFollowPanel key='0' />,
-  //     <LinkFooter key='1' />,
-  //   ],
-  //   RIGHT: [
-  //     // <TrendsPanel />,
-  //     <GroupSidebarPanel key='0' />
-  //   ],
-  // },
-  // STATUS: {
-  //   TOP: null,
-  //   LEFT: null,
-  //   RIGHT: [
-  //     <GroupSidebarPanel key='0' />,
-  //     <WhoToFollowPanel key='1' />,
-  //     // <TrendsPanel />,
-  //     <LinkFooter key='2' />,
-  //   ],
-  // },
-};
-
-const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
-
-class SwitchingColumnsArea extends PureComponent {
 
   static propTypes = {
     children: PropTypes.node,
@@ -150,69 +119,76 @@ class SwitchingColumnsArea extends PureComponent {
     onLayoutChange: PropTypes.func.isRequired,
   };
 
-  state = {
-    mobile: isMobile(window.innerWidth),
-  };
-
   componentWillMount() {
-    window.addEventListener('resize', this.handleResize, { passive: true });
+    window.addEventListener('resize', this.handleResize, {
+      passive: true
+    })
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('resize', this.handleResize)
   }
 
   handleResize = debounce(() => {
     // The cached heights are no longer accurate, invalidate
-    this.props.onLayoutChange();
+    this.props.onLayoutChange()
-
-    this.setState({ mobile: isMobile(window.innerWidth) });
   }, 500, {
       trailing: true,
-    });
+    })
 
   setRef = c => {
-    this.node = c.getWrappedInstance();
+    this.node = c.getWrappedInstance()
   }
 
   render() {
-    const { children } = this.props;
+    const { children } = this.props
 
     return (
       <Switch>
         <Redirect from='/' to='/home' exact />
         <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
-        {/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
 
-        <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} />
+        {/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />*/}
+
+        <WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />
+        <WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
+        <WrappedRoute path='/groups/browse/admin' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'admin' }} />
+
+        { /*
         <WrappedRoute path='/groups/create' page={GroupsPage} component={Groups} content={children} componentParams={{ showCreateForm: true, activeTab: 'featured' }} />
-        <WrappedRoute path='/groups/browse/member' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'member' }} />
-        <WrappedRoute path='/groups/browse/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} />
         <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
         <WrappedRoute path='/groups/:id/removed_accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />
         <WrappedRoute path='/groups/:id/edit' page={GroupPage} component={GroupEdit} content={children} />
         <WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
 
         <WrappedRoute path='/tags/:id' publicRoute component={HashtagTimeline} content={children} />
-*/}
+        */ }
-        <WrappedRoute path='/lists' page={ListsPage} component={ListsDirectory} content={children} />
+
+        <WrappedRoute path='/lists' exact page={ListsPage} component={ListsDirectory} content={children} />
         <WrappedRoute path='/list/:id' page={ListPage} component={ListTimeline} content={children} />
 
-        <WrappedRoute path='/notifications' page={NotificationsPage} component={Notifications} content={children} />
+        <WrappedRoute path='/notifications' exact page={NotificationsPage} component={Notifications} content={children} />
-{/*
+
         <WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
         <WrappedRoute path='/search/people' exact page={SearchPage} component={Search} content={children} />
         <WrappedRoute path='/search/hashtags' exact page={SearchPage} component={Search} content={children} />
         <WrappedRoute path='/search/groups' exact page={SearchPage} component={Search} content={children} />
 
-        <WrappedRoute path='/follow_requests' layout={LAYOUT.DEFAULT} component={FollowRequests} content={children} />
+        {/*
-        <WrappedRoute path='/blocks' layout={LAYOUT.DEFAULT} component={Blocks} content={children} />
+        <WrappedRoute path='/settings/account' exact page={SettingsPage} component={Mutes} content={children} />
-        <WrappedRoute path='/domain_blocks' layout={LAYOUT.DEFAULT} component={DomainBlocks} content={children} />
+        <WrappedRoute path='/settings/profile' exact page={SettingsPage} component={Mutes} content={children} />
-        <WrappedRoute path='/mutes' layout={LAYOUT.DEFAULT} component={Mutes} content={children} />
+        <WrappedRoute path='/settings/domain_blocks' exact page={SettingsPage} component={DomainBlocks} content={children} />
+        <WrappedRoute path='/settings/relationships' exact page={SettingsPage} component={DomainBlocks} content={children} />
+        <WrappedRoute path='/settings/filters' exact page={SettingsPage} component={DomainBlocks} content={children} />
+        <WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={Blocks} content={children} />
+        <WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} />
+        <WrappedRoute path='/settings/development' exact page={SettingsPage} component={Mutes} content={children} />
+        <WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Mutes} content={children} />
+
     */ }
         <Redirect from='/@:username' to='/:username' exact />
-        <WrappedRoute path='/:username' publicRoute exact component={AccountTimeline} page={ProfilePage} content={children} />
+        <WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
-    { /*
+        { /*
         <Redirect from='/@:username/with_replies' to='/:username/with_replies' />
         <WrappedRoute path='/:username/with_replies' component={AccountTimeline} page={ProfilePage} content={children} componentParams={{ withReplies: true }} />
 
@@ -233,27 +209,30 @@ class SwitchingColumnsArea extends PureComponent {
 
         <Redirect from='/@:username/pins' to='/:username/pins' />
         <WrappedRoute path='/:username/pins' component={PinnedStatuses} page={ProfilePage} content={children} />
-        */ }
+
         <Redirect from='/@:username/posts/:statusId' to='/:username/posts/:statusId' exact />
-        <WrappedRoute path='/:username/posts/:statusId' publicRoute exact layout={LAYOUT.STATUS} component={Status} content={children} />
+        <WrappedRoute path='/:username/posts/:statusId' publicRoute exact component={Status} content={children} />
+        */ }
+
         { /*
         <Redirect from='/@:username/posts/:statusId/reblogs' to='/:username/posts/:statusId/reblogs' />
-        <WrappedRoute path='/:username/posts/:statusId/reblogs' layout={LAYOUT.STATUS} component={Reblogs} content={children} />
+        <WrappedRoute path='/:username/posts/:statusId/reblogs' component={Reblogs} content={children} />
-
+        */}
-        <WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />*/}
+        <WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} />
       </Switch>
     );
   }
 }
 
-export default @connect(mapStateToProps)
+export default
+@connect(mapStateToProps)
 @injectIntl
 @withRouter
 class UI extends PureComponent {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
-  };
+  }
 
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
@@ -264,69 +243,79 @@ class UI extends PureComponent {
     location: PropTypes.object,
     intl: PropTypes.object.isRequired,
     dropdownMenuIsOpen: PropTypes.bool,
-  };
+  }
 
   state = {
     draggingOver: false,
-  };
+  }
 
   handleBeforeUnload = (e) => {
-    const { intl, isComposing, hasComposingText, hasMediaAttachments } = this.props;
+    const {
+      intl,
+      isComposing,
+      hasComposingText,
+      hasMediaAttachments
+    } = this.props
 
     if (isComposing && (hasComposingText || hasMediaAttachments)) {
       // Setting returnValue to any string causes confirmation dialog.
       // Many browsers no longer display this text to users,
       // but we set user-friendly message for other browsers, e.g. Edge.
-      e.returnValue = intl.formatMessage(messages.beforeUnload);
+      e.returnValue = intl.formatMessage(messages.beforeUnload)
     }
   }
 
   handleLayoutChange = () => {
     // The cached heights are no longer accurate, invalidate
-    this.props.dispatch(clearHeight());
+    this.props.dispatch(clearHeight())
   }
 
   handleDragEnter = (e) => {
-    e.preventDefault();
+    e.preventDefault()
 
     if (!this.dragTargets) {
-      this.dragTargets = [];
+      this.dragTargets = []
     }
 
     if (this.dragTargets.indexOf(e.target) === -1) {
-      this.dragTargets.push(e.target);
+      this.dragTargets.push(e.target)
     }
 
     if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files')) {
-      this.setState({ draggingOver: true });
+      this.setState({
+        draggingOver: true
+      })
     }
   }
 
   handleDragOver = (e) => {
-    if (this.dataTransferIsText(e.dataTransfer)) return false;
+    if (this.dataTransferIsText(e.dataTransfer)) return false
-    e.preventDefault();
+
-    e.stopPropagation();
+    e.preventDefault()
+    e.stopPropagation()
 
     try {
       e.dataTransfer.dropEffect = 'copy';
     } catch (err) {
-
+      //
     }
 
-    return false;
+    return false
   }
 
   handleDrop = (e) => {
-    if (!me) return;
+    if (!me) return
 
-    if (this.dataTransferIsText(e.dataTransfer)) return;
+    if (this.dataTransferIsText(e.dataTransfer)) return
-    e.preventDefault();
+    e.preventDefault()
 
-    this.setState({ draggingOver: false });
+    this.setState({
-    this.dragTargets = [];
+      draggingOver: false
+    })
+    this.dragTargets = []
 
     if (e.dataTransfer && e.dataTransfer.files.length >= 1) {
-      this.props.dispatch(uploadCompose(e.dataTransfer.files));
+      this.props.dispatch(uploadCompose(e.dataTransfer.files))
     }
   }
 
@@ -336,19 +325,25 @@ class UI extends PureComponent {
 
     this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el));
 
-    if (this.dragTargets.length > 0) {
+    if (this.dragTargets.length > 0) return
-      return;
-    }
 
-    this.setState({ draggingOver: false });
+    this.setState({
+      draggingOver: false
+    })
   }
 
   dataTransferIsText = (dataTransfer) => {
-    return (dataTransfer && Array.from(dataTransfer.types).includes('text/plain') && dataTransfer.items.length === 1);
+    return (
+      dataTransfer
+      && Array.from(dataTransfer.types).includes('text/plain')
+      && dataTransfer.items.length === 1
+    )
   }
 
   closeUploadModal = () => {
-    this.setState({ draggingOver: false });
+    this.setState({
+      draggingOver: false
+    })
   }
 
   handleServiceWorkerPostMessage = ({ data }) => {
@@ -388,6 +383,7 @@ class UI extends PureComponent {
 
   componentDidMount() {
     if (!me) return;
+
     this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
       return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName);
     };
@@ -451,9 +447,9 @@ class UI extends PureComponent {
 
   handleHotkeyBack = () => {
     if (window.history && window.history.length === 1) {
-      this.context.router.history.push('/home'); // homehack
+      this.context.router.history.push('/home') // homehack
     } else {
-      this.context.router.history.goBack();
+      this.context.router.history.goBack()
     }
   }
 
@@ -462,52 +458,52 @@ class UI extends PureComponent {
   }
 
   handleHotkeyToggleHelp = () => {
-    this.props.dispatch(openModal("HOTKEYS"));
+    this.props.dispatch(openModal("HOTKEYS"))
   }
 
   handleHotkeyGoToHome = () => {
-    this.context.router.history.push('/home');
+    this.context.router.history.push('/home')
   }
 
   handleHotkeyGoToNotifications = () => {
-    this.context.router.history.push('/notifications');
+    this.context.router.history.push('/notifications')
   }
 
   handleHotkeyGoToStart = () => {
-    this.context.router.history.push('/getting-started');
+    this.context.router.history.push('/getting-started')
   }
 
   handleHotkeyGoToFavourites = () => {
-    this.context.router.history.push(`/${meUsername}/favorites`);
+    this.context.router.history.push(`/${meUsername}/favorites`)
   }
 
   handleHotkeyGoToPinned = () => {
-    this.context.router.history.push(`/${meUsername}/pins`);
+    this.context.router.history.push(`/${meUsername}/pins`)
   }
 
   handleHotkeyGoToProfile = () => {
-    this.context.router.history.push(`/${meUsername}`);
+    this.context.router.history.push(`/${meUsername}`)
   }
 
   handleHotkeyGoToBlocked = () => {
-    this.context.router.history.push('/blocks');
+    this.context.router.history.push('/blocks')
   }
 
   handleHotkeyGoToMuted = () => {
-    this.context.router.history.push('/mutes');
+    this.context.router.history.push('/mutes')
   }
 
   handleHotkeyGoToRequests = () => {
-    this.context.router.history.push('/follow_requests');
+    this.context.router.history.push('/follow_requests')
   }
 
   handleOpenComposeModal = () => {
-    this.props.dispatch(openModal("COMPOSE"));
+    this.props.dispatch(openModal("COMPOSE"))
   }
 
   render() {
     const { draggingOver } = this.state;
-    const { intl, children, isComposing, location, dropdownMenuIsOpen } = this.props;
+    const { children, location, dropdownMenuIsOpen } = this.props;
 
     const handlers = me ? {
       help: this.handleHotkeyToggleHelp,
@@ -527,21 +523,29 @@ class UI extends PureComponent {
       goToRequests: this.handleHotkeyGoToRequests,
     } : {};
 
-    const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
-
     return (
-      <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
+      <HotKeys
-        <div ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
+        keyMap={keyMap}
-          <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
+        handlers={handlers}
+        ref={this.setHotkeysRef}
+        attach={window}
+        focused
+      >
+        <div
+          ref={this.setRef}
+          style={{
+            pointerEvents: dropdownMenuIsOpen ? 'none' : null
+          }}
+        >
+          <SwitchingArea
+            location={location}
+            onLayoutChange={this.handleLayoutChange}
+          >
             {children}
-          </SwitchingColumnsArea>
+          </SwitchingArea>
-          { /* <FooterBar /> */ }
-
-          { /* me && floatingActionButton */ }
 
           { /*
           <NotificationsContainer />
-          <LoadingBarContainer className='loading-bar' />
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
           */ }

app/javascript/gabsocial/features/ui/util/async-components.js

@@ -1,143 +1,143 @@
-export function EmojiPicker () {
+export function EmojiPicker() {
-  return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker');
+  return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker')
 }
 
-export function Compose () {
+export function Compose() {
-  return import(/* webpackChunkName: "features/compose" */'../../compose');
+  return import(/* webpackChunkName: "features/compose" */'../../compose')
 }
 
-export function Notifications () {
+export function Notifications() {
-  return import(/* webpackChunkName: "features/notifications" */'../../notifications');
+  return import(/* webpackChunkName: "features/notifications" */'../../notifications')
 }
 
-export function HomeTimeline () {
+export function HomeTimeline() {
-  return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline');
+  return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline')
 }
 
-export function CommunityTimeline () {
+export function CommunityTimeline() {
-  return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline');
+  return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline')
 }
 
-export function HashtagTimeline () {
+export function HashtagTimeline() {
-  return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline');
+  return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline')
 }
 
-export function ListTimeline () {
+export function ListTimeline() {
-  return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline');
+  return import(/* webpackChunkName: "features/list_timeline" */'../../list_timeline')
 }
 
-export function GroupTimeline () {
+export function GroupTimeline() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline');
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline')
 }
 
-export function GroupMembers () {
+export function GroupMembers() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members');
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members')
 }
 
-export function GroupRemovedAccounts () {
+export function GroupRemovedAccounts() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/removed_accounts');
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/removed_accounts')
 }
 
-export function GroupCreate () {
+export function GroupCreate() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/create');
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/create')
 }
 
-export function GroupEdit () {
+export function GroupEdit() {
-  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit');
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/edit')
 }
 
-export function Groups () {
+export function GroupsCollection() {
-  return import(/* webpackChunkName: "features/groups/index" */'../../groups/index');
+  return import(/* webpackChunkName: "features/groups_collection" */'../../g../../groups_collection')
 }
 
-export function ListsDirectory () {
+export function ListsDirectory() {
-  return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory');
+  return import(/* webpackChunkName: "features/lists_directory" */'../../lists_directory')
 }
 
-export function Status () {
+export function Status() {
-  return import(/* webpackChunkName: "features/status" */'../../status');
+  return import(/* webpackChunkName: "features/status" */'../../status')
 }
 
-export function PinnedStatuses () {
+export function PinnedStatuses() {
-  return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses');
+  return import(/* webpackChunkName: "features/pinned_statuses" */'../../pinned_statuses')
 }
 
-export function AccountTimeline () {
+export function AccountTimeline() {
-  return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline');
+  return import(/* webpackChunkName: "features/account_timeline" */'../../account_timeline')
 }
 
-export function AccountGallery () {
+export function AccountGallery() {
-  return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery');
+  return import(/* webpackChunkName: "features/account_gallery" */'../../account_gallery')
 }
 
-export function Followers () {
+export function Followers() {
-  return import(/* webpackChunkName: "features/followers" */'../../followers');
+  return import(/* webpackChunkName: "features/followers" */'../../followers')
 }
 
-export function Following () {
+export function Following() {
-  return import(/* webpackChunkName: "features/following" */'../../following');
+  return import(/* webpackChunkName: "features/following" */'../../following')
 }
 
-export function Reblogs () {
+export function Reblogs() {
-  return import(/* webpackChunkName: "features/reblogs" */'../../reblogs');
+  return import(/* webpackChunkName: "features/reblogs" */'../../reblogs')
 }
 
-export function FollowRequests () {
+export function FollowRequests() {
-  return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests');
+  return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests')
 }
 
-export function GenericNotFound () {
+export function GenericNotFound() {
-  return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found');
+  return import(/* webpackChunkName: "features/generic_not_found" */'../../generic_not_found')
 }
 
-export function FavouritedStatuses () {
+export function FavouritedStatuses() {
-  return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses');
+  return import(/* webpackChunkName: "features/favourited_statuses" */'../../favourited_statuses')
 }
 
-export function Blocks () {
+export function Blocks() {
-  return import(/* webpackChunkName: "features/blocks" */'../../blocks');
+  return import(/* webpackChunkName: "features/blocks" */'../../blocks')
 }
 
-export function DomainBlocks () {
+export function DomainBlocks() {
-  return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks');
+  return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks')
 }
 
-export function Mutes () {
+export function Mutes() {
-  return import(/* webpackChunkName: "features/mutes" */'../../mutes');
+  return import(/* webpackChunkName: "features/mutes" */'../../mutes')
 }
 
-export function MuteModal () {
+export function MuteModal() {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal');
+  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
 }
 
-export function StatusRevisionModal () {
+export function StatusRevisionModal() {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal');
+  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
 }
 
-export function ReportModal () {
+export function ReportModal() {
-  return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal');
+  return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal')
 }
 
-export function MediaGallery () {
+export function MediaGallery() {
-  return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
+  return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery')
 }
 
-export function Video () {
+export function Video() {
-  return import(/* webpackChunkName: "features/video" */'../../video');
+  return import(/* webpackChunkName: "features/video" */'../../video')
 }
 
-export function EmbedModal () {
+export function EmbedModal() {
-  return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal');
+  return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal')
 }
 
-export function ListEditor () {
+export function ListEditor() {
-  return import(/* webpackChunkName: "features/list_editor" */'../../list_editor');
+  return import(/* webpackChunkName: "features/list_editor" */'../../list_editor')
 }
 
-export function ListAdder () {
+export function ListAdder() {
-  return import(/*webpackChunkName: "features/list_adder" */'../../list_adder');
+  return import(/*webpackChunkName: "features/list_adder" */'../../list_adder')
 }
 
-export function Search () {
+export function Search() {
-  return import(/*webpackChunkName: "features/search" */'../../search');
+  return import(/*webpackChunkName: "features/search" */'../../search')
 }

app/javascript/gabsocial/features/ui/util/bundle.js

@@ -1,21 +1,26 @@
-import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from '../../../actions/bundles';
+import {
+  fetchBundleRequest,
+  fetchBundleSuccess,
+  fetchBundleFail
+} from '../../../actions/bundles'
 
 const mapDispatchToProps = dispatch => ({
   onFetch() {
-    dispatch(fetchBundleRequest());
+    dispatch(fetchBundleRequest())
   },
   onFetchSuccess() {
-    dispatch(fetchBundleSuccess());
+    dispatch(fetchBundleSuccess())
   },
   onFetchFail(error) {
-    dispatch(fetchBundleFail(error));
+    dispatch(fetchBundleFail(error))
   },
-});
+})
 
-const emptyComponent = () => null;
+const emptyComponent = () => null
-const noop = () => { };
+const noop = () => { }
 
-export default @connect(null, mapDispatchToProps)
+export default
+@connect(null, mapDispatchToProps)
 class Bundle extends PureComponent {
 
   static propTypes = {
@@ -46,69 +51,94 @@ class Bundle extends PureComponent {
   }
 
   componentWillMount() {
-    this.load(this.props);
+    this.load(this.props)
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.fetchComponent !== this.props.fetchComponent) {
-      this.load(nextProps);
+      this.load(nextProps)
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     if (this.timeout) {
-      clearTimeout(this.timeout);
+      clearTimeout(this.timeout)
     }
   }
 
   load = (props) => {
-    const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
+    const {
-    const cachedMod = Bundle.cache.get(fetchComponent);
+      fetchComponent,
+      onFetch,
+      onFetchSuccess,
+      onFetchFail,
+      renderDelay
+    } = props || this.props
+
+    const cachedMod = Bundle.cache.get(fetchComponent)
 
     if (fetchComponent === undefined) {
-      this.setState({ mod: null });
+      this.setState({
-      return Promise.resolve();
+        mod: null
+      })
+      return Promise.resolve()
     }
 
-    onFetch();
+    onFetch()
 
     if (cachedMod) {
-      this.setState({ mod: cachedMod.default });
+      this.setState({
-      onFetchSuccess();
+        mod: cachedMod.default
-      return Promise.resolve();
+      })
+      onFetchSuccess()
+      return Promise.resolve()
     }
 
-    this.setState({ mod: undefined });
+    this.setState({
+      mod: undefined
+    })
 
     if (renderDelay !== 0) {
-      this.timestamp = new Date();
+      this.timestamp = new Date()
-      this.timeout = setTimeout(() => this.setState({ forceRender: true }), renderDelay);
+      this.timeout = setTimeout(() => this.setState({
+        forceRender: true
+      }), renderDelay)
     }
 
     return fetchComponent()
       .then((mod) => {
-        Bundle.cache.set(fetchComponent, mod);
+        Bundle.cache.set(fetchComponent, mod)
-        this.setState({ mod: mod.default });
+        this.setState({
-        onFetchSuccess();
+          mod: mod.default
+        })
+        onFetchSuccess()
       })
       .catch((error) => {
-        this.setState({ mod: null });
+        this.setState({
-        onFetchFail(error);
+          mod: null
-      });
+        })
+        onFetchFail(error)
+      })
   }
 
   render() {
-    const { loading: Loading, error: Error, children, renderDelay } = this.props;
+    const {
-    const { mod, forceRender } = this.state;
+      loading: LoadingComponent,
-    const elapsed = this.timestamp ? (new Date() - this.timestamp) : renderDelay;
+      error: ErrorComponent,
+      children,
+      renderDelay
+    } = this.props
+
+    const { mod, forceRender } = this.state
+    const elapsed = this.timestamp ? (new Date() - this.timestamp) : renderDelay
 
     if (mod === undefined) {
-      return (elapsed >= renderDelay || forceRender) ? <Loading /> : null;
+      return (elapsed >= renderDelay || forceRender) ? <LoadingComponent /> : null
     } else if (mod === null) {
-      return <Error onRetry={this.load} />;
+      return <ErrorComponent onRetry={this.load} />
     }
 
-    return children(mod);
+    return children(mod)
   }
 
 }

app/javascript/gabsocial/features/ui/util/wrapped_route.js

@@ -1,77 +1,64 @@
-import { Route } from 'react-router-dom';
+import { Route } from 'react-router-dom'
-import DefaultLayout from '../../../components/layouts/default_layout';
+import BundleColumnError from '../../../components/bundle_column_error'
-import BundleColumnError from '../../../components/bundle_column_error';
+import Bundle from './bundle'
-import Bundle from './bundle';
+import { me } from '../../../initial_state'
-import { me } from '../../../initial_state';
-import ColumnIndicator from '../../../components/column_indicator';
 
 export default class WrappedRoute extends Component {
   static propTypes = {
     component: PropTypes.func.isRequired,
-    page: PropTypes.func,
+    page: PropTypes.func.isRequired,
     content: PropTypes.node,
     componentParams: PropTypes.object,
-    layout: PropTypes.object,
     publicRoute: PropTypes.bool,
-  };
+  }
 
   static defaultProps = {
     componentParams: {},
-  };
+  }
 
   renderComponent = ({ match }) => {
-    const { component, content, componentParams, layout, page: Page } = this.props;
+    const {
-
+      component,
-    if (Page) {
+      content,
-      return (
+      componentParams,
-        <Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+      page: Page
-          {Component =>
+    } = this.props
-            (
-              <Page params={match.params} {...componentParams}>
-                <Component params={match.params} {...componentParams}>
-                  {content}
-                </Component>
-              </Page>
-            )
-          }
-        </Bundle>
-      );
-    }
 
     return (
-      <Bundle fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
+      <Bundle fetchComponent={component} error={this.renderError}>
         {Component =>
           (
-            <DefaultLayout layout={layout}>
+            <Page params={match.params} {...componentParams}>
               <Component params={match.params} {...componentParams}>
                 {content}
               </Component>
-            </DefaultLayout>
+            </Page>
           )
         }
       </Bundle>
-    );
+    )
-  }
-
-  renderLoading = () => {
-    return <div />
   }
 
   renderError = (props) => {
-    return <BundleColumnError {...props} />;
+    return <BundleColumnError {...props} />
   }
 
   render() {
-    const { component: Component, content, publicRoute, ...rest } = this.props;
+    const {
+      component: Component,
+      content,
+      publicRoute,
+      ...rest
+    } = this.props
 
     if (!publicRoute && !me) {
-      const actualUrl = encodeURIComponent(this.props.computedMatch.url);
+      const actualUrl = encodeURIComponent(this.props.computedMatch.url)
       return <Route path={this.props.path} component={() => {
-        window.location.href = `/auth/sign_in?redirect_uri=${actualUrl}`;
+        window.location.href = `/auth/sign_in?redirect_uri=${actualUrl}`
-        return null;
+        return null
       }} />
     }
 
-    return <Route {...rest} render={this.renderComponent} />;
+    return <Route {...rest} render={this.renderComponent} />
   }
 }

app/javascript/gabsocial/pages/error_page.js

@@ -0,0 +1,12 @@
+export default class ErrorPage extends PureComponent {
+
+	render() {
+		const { children } = this.props;
+
+		return (
+			<div>
+				{children}
+			</div>
+		)
+	}
+}

app/javascript/gabsocial/pages/group_page.js

@@ -4,8 +4,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { fetchGroup } from '../actions/groups';
 import HeaderContainer from '../features/groups/timeline/containers/header_container';
 import GroupPanel from '../features/groups/timeline/components/panel';
-import GroupSidebarPanel from '../features/groups/sidebar_panel';
+// import GroupSidebarPanel from '../features/groups/sidebar_panel';
-import DefaultLayout from '../components/default_layout';
+import DefaultLayout from '../components/layouts/default_layout';
 import { WhoToFollowPanel } from '../components/panel';
 import LinkFooter from '../components/link_footer';
 
@@ -39,7 +39,6 @@ class GroupPage extends ImmutablePureComponent {
 					TOP: top,
 					RIGHT: (
 						<Fragment>
-							<GroupSidebarPanel />
 							<WhoToFollowPanel />
 						</Fragment>
 					),

app/javascript/gabsocial/pages/groups_page.js

@@ -0,0 +1,56 @@
+import { Fragment } from 'react'
+import LinkFooter from '../components/link_footer'
+import GroupsPanel from '../components/panel/groups_panel'
+import DefaultLayout from '../components/layouts/default_layout'
+
+export default class GroupsPage extends PureComponent {
+
+  handleClickNewList () {
+    console.log("handleClickNewList")
+  }
+
+  handleClickEditLists () {
+    console.log("handleClickEditLists")
+  }
+
+  render() {
+    const { children } = this.props
+
+    const tabs = [
+      {
+        title: 'Featured',
+        to: '/groups'
+      },
+      {
+        title: 'My Groups',
+        to: '/groups/browse/member'
+      },
+      { // only if is_pro
+        title: 'Admin',
+        to: '/groups/browse/admin'
+      },
+    ]
+
+    return (
+      <DefaultLayout
+        title='Groups'
+        actions={[
+          {
+            icon: 'list-delete',
+            onClick: this.handleClickEditLists
+          },
+        ]}
+        layout={(
+          <Fragment>
+            <GroupsPanel slim />
+            <LinkFooter />
+          </Fragment>
+        )}
+        tabs={tabs}
+        showBackBtn
+      >
+        { children }
+      </DefaultLayout>
+    )
+  }
+}

app/javascript/gabsocial/pages/notifications_page.js

@@ -18,6 +18,7 @@ export default class NotificationsPage extends PureComponent {
             <LinkFooter />
           </Fragment>
         )}
+        showBackBtn
       >
         {children}
       </DefaultLayout>

app/javascript/gabsocial/pages/search_page.js

@@ -1,32 +1,17 @@
-import { Fragment } from 'react';
+import { Fragment } from 'react'
-import Header from '../features/search/components/header';
+import LinkFooter from '../components/link_footer'
-import LinkFooter from '../components/link_footer';
+import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
-import { WhoToFollowPanel, SignUpPanel } from '../components/panel';
+import TrendsPanel from '../components/panel/trends_panel'
-import DefaultLayout from '../components/layouts/default_layout';
+import SearchLayout from '../components/layouts/search_layout'
 
 export default class SearchPage extends PureComponent {
-
-  static propTypes = {
-    children: PropTypes.node,
-  };
-
   render() {
+    const { children } = this.props
+
     return (
-      <DefaultLayout
+      <SearchLayout>
-        layout={{
+        {children}
-          TOP: <Header/>,
+      </SearchLayout>
-          RIGHT: (
-            <Fragment>
-              <SignUpPanel />
-              <WhoToFollowPanel />
-            </Fragment>
-          ),
-          LEFT: <LinkFooter/>,
-        }}
-      >
-        {this.props.children}
-      </DefaultLayout>
     )
   }
-
+}
-};

app/javascript/styles/global.css

@@ -106,12 +106,14 @@ body {
 .borderColorSecondary { border-color: #ECECED; }
 .borderColorWhite { border-color: #fff; }
 .borderColorBrand { border-color: #21cf7a; }
+.borderColorTransparent { border-color: transparent; }
 .borderRight1PX { border-right-width: 1px; }
 .borderBottom1PX { border-bottom-width: 1px; }
 .borderLeft1PX { border-left-width: 1px; }
 .borderTop1PX { border-top-width: 1px; }
 .border1PX { border-width: 1px; }
 .border2PX { border-width: 2px; }
+.borderBottom2PX { border-bottom-width: 2px; }
 
 .marginAuto { margin: auto; }
 
@@ -131,6 +133,7 @@ body {
 .backgroundSubtle { background-color: #F5F8FA; }
 .backgroundSubtle_onHover:hover { background-color: #F5F8FA; }
 .backgroundSubtle2 { background-color: #e8ecef; }
+.backgroundSubtle2Dark_onHover:hover { background-color: #d9e0e5; }
 .backgroundcolorSecondary3 { background-color: #F6F6F9; }
 .backgroundColorPrimary { background-color: #fff; }
 .backgroundColorBrandLightOpaque { background-color: rgba(54, 233, 145, 0.1); }
@@ -184,6 +187,7 @@ body {
 .width240PX { width: 240px; }
 .width100PC { width: 100%; }
 .width72PX { width: 72px; }
+.width50PC { width: 50%; }
 .maxWidth100PC { max-width: 100%; }
 
 @media (min-width: 1480px) {