Progress

app/javascript/gabsocial/actions/compose.js

@@ -2,7 +2,7 @@ import api from '../api';
 import { CancelToken, isCancel } from 'axios';
 import throttle from 'lodash.throttle'
 import { search as emojiSearch } from '../components/emoji/emoji_mart_search_light';
-import { urlRegex } from '../features/compose/util/url_regex'
+import { urlRegex } from '../features/ui/util/url_regex'
 import { tagHistory } from '../settings';
 import { useEmoji } from './emojis';
 import resizeImage from '../utils/resize_image';

app/javascript/gabsocial/components/account.js

@@ -83,6 +83,7 @@ class Account extends ImmutablePureComponent {
     expanded: PropTypes.bool,
     showDismiss: PropTypes.bool,
     dismissAction: PropTypes.func,
+    withBio: PropTypes.bool,
   }
 
   updateOnProps = [
@@ -91,6 +92,7 @@ class Account extends ImmutablePureComponent {
     'compact',
     'expanded',
     'showDismiss',
+    'withBio',
   ]
 
   handleAction = () => {

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -246,8 +246,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       return (
         <Fragment>
           <div className={[_s.default, _s.flexGrow1, _s.maxWidth100PC].join(' ')}>
-            <div className={[_s.default].join(' ')}>
-
             <Composer
               inputRef={this.setTextbox}
               disabled={disabled}
@@ -263,7 +261,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
               small={small}
             />
 
-            </div>
             {children}
           </div>
           { /* : todo :  put in popover */ }

app/javascript/gabsocial/components/column_header.js

@@ -56,7 +56,10 @@ export default class ColumnHeader extends PureComponent {
           </Heading>
         </div>
         
+        {
+          !!tabs &&
           <TabBar tabs={tabs} />
+        }
 
         {
           !!actions &&
@@ -65,10 +68,10 @@ export default class ColumnHeader extends PureComponent {
               actions.map((action, i) => (
                 <Button
                   backgroundColor='none'
-                  color='secondary'
+                  color='primary'
                   onClick={() => action.onClick()}
                   key={`column-header-action-btn-${i}`}
-                  className={[_s.ml5, _s.fillColorBrand_onHover, _s.backgroundColorBrandLightOpaque_onHover, _s.px10].join(' ')}
+                  className={[_s.ml5, _s.px10].join(' ')}
                   icon={action.icon}
                   iconClassName={_s.inheritFill}
                   iconSize='15px'

app/javascript/gabsocial/components/comment.js

@@ -60,7 +60,7 @@ class Comment extends ImmutablePureComponent {
               <Avatar account={status.get('account')} size={32} />
             </NavLink>
 
-            <div className={_s.default}>
+            <div className={[_s.default, _s.flexNormal].join(' ')}>
               <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.backgroundColorSubtle].join(' ')}>
                 <CommentHeader status={status} />
                 <StatusContent

app/javascript/gabsocial/components/composer.js

@@ -8,7 +8,7 @@ import {
 } from 'draft-js'
 import { draftToMarkdown } from 'markdown-draft-js'
 // import draftToMarkdown from 'draftjs-to-markdown'
-import { urlRegex } from '../features/compose/util/url_regex'
+import { urlRegex } from '../features/ui/util/url_regex'
 import classNames from 'classnames/bind'
 import RichTextEditorBar from './rich_text_editor_bar'
 

app/javascript/gabsocial/components/group_header.js

@@ -1,36 +1,45 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
+import { defineMessages, injectIntl } from 'react-intl'
-import classNames from 'classnames/bind'
 import { openPopover, closePopover } from '../actions/popover'
-import { initReport } from '../actions/reports'
 import { openModal } from '../actions/modal'
-import { unfollowModal, me } from '../initial_state'
+import { joinGroup, leaveGroup } from '../actions/groups'
-import Avatar from './avatar'
+import { PLACEHOLDER_MISSING_HEADER_SRC } from '../constants'
 import Button from './button'
 import Block from './block'
-import Icon from './icon'
 import Image from './image'
 import TabBar from './tab_bar'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 const messages = defineMessages({
-  follow: { id: 'follow', defaultMessage: 'Follow' },
+  join: { id: 'groups.join', defaultMessage: 'Join group' },
-  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
+  leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
-  requested: { id: 'requested', defaultMessage: 'Requested' },
+  share: { id: 'status.share', defaultMessage: 'Share' },
-  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
+  removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
-  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
-  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+  group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
-  profile: { id: 'account.profile', defaultMessage: 'Profile' },
 })
 
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
+  toggleMembership(group, relationships) {
+    if (relationships.get('member')) {
+      dispatch(leaveGroup(group.get('id')));
+    } else {
+      dispatch(joinGroup(group.get('id')));
+    }
+  },
+
+  onShare() {
+
+  },
+
+  onOpenGroupOptions() {
+
+  },
+
   openProfileOptionsPopover(props) {
-    console.log('props:', props)
+    dispatch(openPopover('GROUP_OPTIONS', props))
-    dispatch(openPopover('PROFILE_OPTIONS', props))
   },
 
 });
@@ -41,40 +50,67 @@ export default
 class GroupHeader extends ImmutablePureComponent {
 
   static propTypes = {
-    intl: PropTypes.object.isRequired,
     group: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+    onToggleMembership: PropTypes.func.isRequired,
+    onShare: PropTypes.func.isRequired,
+    onOpenGroupOptions: PropTypes.func.isRequired,
     relationships: ImmutablePropTypes.map,
   }
 
+  handleOnToggleMembership = () => {
+    const { group, relationships } = this.props
+    this.props.onToggleMembership(group, relationships);
+  }
 
   render() {
-    const { intl, relationships, group } = this.props
+    const {
+      group,
+      intl,
+      onShare,
+      onOpenGroupOptions,
+      relationships,
+    } = this.props
 
     const tabs = !group ? null : [
       {
         to: `/groups/${group.get('id')}`,
         title: 'Latest',
       },
-      {
-        to: `/groups/${group.get('id')}/pinned`,
-        title: 'Pinned',
-      },
-      {
-        to: `/groups/${group.get('id')}/popular`,
-        title: 'Popular',
-      },
     ]
 
-    const coverSrc = !!group ? group.get('cover_image_url') : undefined
+    const coverSrc = !!group ? group.get('cover_image_url') : ''
+    const coverSrcMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
     const title = !!group ? group.get('title') : undefined
 
+    let actionButtonTitle
+    let actionButtonOptions = {}
+    if (relationships) {
+      const isMember = relationships.get('member')
+      actionButtonTitle = intl.formatMessage(!isMember ? messages.join : messages.leave)
+      if (isMember) {
+        actionButtonOptions = {
+          backgroundColor: 'tertiary',
+          color: 'primary',
+        }
+      }
+    }
+
+    // : todo :
+    // {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
+
+    // const adminMenu = [
+    // 	{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
+    // 	{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed-accounts` },
+    // ]
+
     return (
       <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
         <Block>
           <div className={[_s.default, _s.width100PC].join(' ')}>
             
             {
-              !!coverSrc &&
+              coverSrc && !coverSrcMissing &&
               <Image className={_s.height350PX} src={coverSrc} alt={title} />
             }
 
@@ -82,24 +118,27 @@ class GroupHeader extends ImmutablePureComponent {
               <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
                 <TabBar tabs={tabs} />
                 <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
+                  {
+                    !!actionButtonTitle &&
                     <Button
-                    color='primary'
-                    backgroundColor='tertiary'
                       radiusSmall
                       className={_s.mr5}
+                      {...actionButtonOptions}
                     >
                       <Text color='inherit' size='small'>
-                      Leave/Join
+                        {actionButtonTitle}
                       </Text>
                     </Button>
+                  }
                   <Button
                     color='primary'
                     backgroundColor='tertiary'
                     radiusSmall
                     className={_s.mr5}
+                    onClick={onShare}
                   >
                     <Text color='inherit' size='small'>
-                      Share
+                      {intl.formatMessage(messages.share)}
                     </Text>
                   </Button>
                   <Button
@@ -108,6 +147,7 @@ class GroupHeader extends ImmutablePureComponent {
                     backgroundColor='tertiary'
                     className={_s.mr5}
                     icon='ellipsis'
+                    onClick={onOpenGroupOptions}
                   />
                 </div>
               </div>

app/javascript/gabsocial/components/hashtag_item.js

@@ -9,12 +9,13 @@ export default class HashtagItem extends ImmutablePureComponent {
 
   static propTypes = {
     hashtag: ImmutablePropTypes.map.isRequired,
+    isCompact: PropTypes.bool,
   }
 
   updateOnProps = ['hashtag']
 
   render() {
-    const { hashtag } = this.props
+    const { hashtag, isCompact } = this.props
 
     const count = hashtag.get('history').map((block) => {
       return parseInt(block.get('uses'))
@@ -31,6 +32,8 @@ export default class HashtagItem extends ImmutablePureComponent {
               {hashtag.get('name')}
             </Text>
           </div>
+          {
+            !isCompact &&
             <Button
               isText
               backgroundColor='none'
@@ -41,12 +44,16 @@ export default class HashtagItem extends ImmutablePureComponent {
               iconClassName={_s.fillColorSecondary}
               className={_s.mlAuto}
             />
+          }
         </div>
+        {
+          !isCompact &&
           <Text color='secondary' size='small' className={_s.py2}>
             <FormattedMessage id='number_of_gabs' defaultMessage='{count} Gabs' values={{
               count,
             }} />
           </Text>
+        }
       </NavLink>
     )
   }

app/javascript/gabsocial/components/input.js

@@ -22,7 +22,7 @@ export default class Input extends PureComponent {
     small: PropTypes.bool,
     readOnly: PropTypes.string,
     inputRef: PropTypes.func,
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
     hideLabel: PropTypes.bool,
   }
 
@@ -71,13 +71,6 @@ export default class Input extends PureComponent {
       pr15: !hasClear,
     })
 
-    const titleClasses = cx({
-      default: 1,
-      mb10: 1,
-      pl15: 1,
-      displayNone: hideLabel,
-    })
-
     const btnClasses = cx({
       displayNone: !value || value.length === 0,
       px10: 1,
@@ -87,8 +80,8 @@ export default class Input extends PureComponent {
     return (
       <Fragment>
         {
-          !!title &&
+          !!title && !hideLabel &&
-          <div className={titleClasses}>
+          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
             <Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
               {title}
             </Text>
@@ -100,6 +93,11 @@ export default class Input extends PureComponent {
             <Icon id={prependIcon} size='16px' className={[_s.fillColorPrimary, _s.ml15, _s.mr5].join(' ')} />
           }
 
+          {
+            !!title && hideLabel &&
+            <label className={_s.visiblyHidden} htmlFor={id}>{title}</label>
+          }
+          
           <input
             id={id}
             className={inputClasses}

app/javascript/gabsocial/components/navigation_bar.js

@@ -0,0 +1,73 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { NavLink } from 'react-router-dom'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import { me } from '../initial_state'
+import { makeGetAccount } from '../selectors'
+import Responsive from '../features/ui/util/responsive_component'
+import ColumnHeader from './column_header'
+import Search from './search'
+import Icon from './icon'
+
+const mapStateToProps = (state) => ({
+  account: makeGetAccount()(state, me),
+})
+
+export default
+@connect(mapStateToProps)
+class NavigationBar extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    actions: PropTypes.array,
+    tabs: PropTypes.array,
+    title: PropTypes.string,
+    showBackBtn: PropTypes.bool,
+  }
+
+  render() {
+    const {
+      title,
+      showBackBtn,
+      actions,
+      tabs,
+      account,
+    } = this.props
+
+    const isPro = account.get('is_pro')
+
+    return (
+      <div className={[_s.default, _s.height53PX, _s.flexRow, _s.backgroundColorPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+        <div className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
+          <div className={[_s.default, _s.width240PX].join(' ')}>
+            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX].join(' ')}>
+              <h1 className={[_s.default].join(' ')}>
+                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.flexRow, _s.noSelect, _s.noUnderline, _s.height50PX, _s.cursorPointer, _s.px10].join(' ')}>
+                  <Icon id='gab-logo' />
+                </NavLink>
+              </h1>
+            </div>
+          </div>
+        </div>
+        <div className={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}>
+          <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+            <div className={[_s.default, _s.width645PX].join(' ')}>
+              <ColumnHeader
+                title={title}
+                showBackBtn={showBackBtn}
+                actions={actions}
+                tabs={tabs}
+              />
+            </div>
+            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+              <div className={[_s.default, _s.width340PX].join(' ')}>
+                <Search />
+              </div>
+            </Responsive>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}

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

@@ -37,6 +37,12 @@ class GroupSidebarPanel extends ImmutablePureComponent {
     fetched: false,
   }
 
+  componentDidMount() {
+    if (!this.props.isLazy) {
+      this.props.onFetchGroups('member')
+    }
+  }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
       return {

app/javascript/gabsocial/components/search.js

@@ -105,13 +105,16 @@ class Search extends PureComponent {
           hasClear
           value={value}
           inputRef={this.setTextbox}
+          id='search'
           prependIcon='search'
-          placeholder='Search on Gab...'
+          placeholder='Search Gab'
           onChange={this.handleChange}
           onKeyUp={this.handleKeyUp}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onClear={onClear}
+          hideLabel
+          title='Search'
         />
 
         {

app/javascript/gabsocial/components/sidebar_section_item.js

@@ -113,7 +113,6 @@ export default class SidebarSectionItem extends PureComponent {
         className={[_s.default, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.width100PC, _s.backgroundTransparent].join(' ')}
       >
         <div className={containerClasses}>
-          <div className={[_s.default]}>
           {
             icon && 
             <Icon id={icon} className={iconClasses} size={iconSize} />
@@ -129,7 +128,6 @@ export default class SidebarSectionItem extends PureComponent {
               src={image}
             />
           }
-          </div>
           
           <div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
             <span className={textClasses}>{title}</span>

app/javascript/gabsocial/components/trends_item.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import classNames from 'classnames/bind'
-import { urlRegex } from '../features/compose/util/url_regex'
+import { urlRegex } from '../features/ui/util/url_regex'
 import Button from './button'
 import DotTextSeperator from './dot_text_seperator'
 import Image from './image'

app/javascript/gabsocial/components/zoomable_image.js

@@ -24,7 +24,7 @@ const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
 //     @include max-size($media-modal-media-max-width, $media-modal-media-max-height);
 //   }
 // }
-
+// : todo :
 
 export default class ZoomableImage extends PureComponent {
 

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

@@ -33,6 +33,7 @@ export default class ComposeExtraButton extends PureComponent {
       px10: !small,
       py5: small,
       px5: small,
+      mr2: !children,
     })
 
     const iconClasses = cx({
@@ -42,8 +43,7 @@ export default class ComposeExtraButton extends PureComponent {
 
     const iconSize = !!small ? '14px' : '16px'
 
-    return (
+    const button = (
-      <div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>
       <Button
         className={btnClasses}
         title={title}
@@ -53,7 +53,17 @@ export default class ComposeExtraButton extends PureComponent {
         iconClassName={iconClasses}
         icon={icon}
         iconSize={iconSize}
+        buttonRef={!children ? buttonRef : undefined}
       />
+    )
+
+    if (!children) {
+      return button
+    }
+
+    return (
+      <div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>
+        {button}
         {children}
       </div>
     )

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

@@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { length } from 'stringz'
 import { isMobile } from '../../../utils/is_mobile'
-import { countableText } from '../util/counter'
+import { countableText } from '../../ui/util/counter'
 import {
   CX,
   MAX_POST_CHARACTER_COUNT,
@@ -239,7 +239,7 @@ class ComposeForm extends ImmutablePureComponent {
     } = this.props
     const disabled = isSubmitting
     const text = [this.props.spoilerText, countableText(this.props.text)].join('');
-    const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
+    const disabledButton = disabled || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text) !== 0 && length(text.trim()) === 0 && !anyMedia);
     const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
     
     const parentContainerClasses = CX({
@@ -406,7 +406,7 @@ class ComposeForm extends ImmutablePureComponent {
                     <Button
                       isNarrow
                       onClick={this.handleSubmit}
-                      disabled={disabledButton}
+                      isDisabled={disabledButton}
                       className={_s.px10}
                     >
                       {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
@@ -421,8 +421,12 @@ class ComposeForm extends ImmutablePureComponent {
               }
 
               {
-                !shouldCondense && !disabledButton &&
+                !shouldCondense &&
                 <Button
+                  isOutline
+                  isDisabled={disabledButton}
+                  backgroundColor='none'
+                  color='brand'
                   className={[_s.fontSize15PX, _s.px15].join(' ')}
                   onClick={this.handleSubmit}
                 >

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

@@ -1,118 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import { FormattedMessage } from 'react-intl'
-import { withRouter } from 'react-router-dom';
-import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
-import HashtagItem from '../../../components/hashtag_item'
-import Icon from '../../../components/icon'
-import { WhoToFollowPanel } from '../../../components/panel'
-// import TrendsPanel from '../../ui/components/trends_panel'
-import GroupListItem from '../../../components/group_list_item'
-import Block from '../../../components/block'
-import Heading from '../../../components/heading'
-import Button from '../../../components/button'
-import Text from '../../../components/text'
-import Account from '../../../components/account'
-
-const mapStateToProps = (state) => ({
-  results: state.getIn(['search', 'results']),
-  suggestions: state.getIn(['suggestions', 'items']),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  fetchSuggestions: () => dispatch(fetchSuggestions()),
-  dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
-});
-
-export default
-@withRouter
-@connect(mapStateToProps, mapDispatchToProps)
-class SearchResults extends ImmutablePureComponent {
-
-  static propTypes = {
-    results: ImmutablePropTypes.map.isRequired,
-    location: PropTypes.object,
-  }
-
-  state = {
-    isSmallScreen: (window.innerWidth <= 895),
-  }
-
-  render () {
-    const { results, location } = this.props
-    const { isSmallScreen } = this.state
-
-    if (results.isEmpty() && isSmallScreen) {
-      return (
-        <div />
-      )
-    }
-
-    const pathname = location.pathname || ''
-    const showPeople = pathname === '/search/people'
-    const showHashtags = pathname === '/search/hashtags'
-    const showGroups = pathname === '/search/groups'
-    const isTop = !showPeople && !showHashtags && !showGroups
-
-    let accounts, statuses, hashtags, groups
-
-    if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
-      const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
-      accounts = (
-        <div className={[_s.default, _s.py15].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.mb15, _s.px15].join(' ')}>
-            <Heading size='h2'>
-              People
-            </Heading>
-            <div className={[_s.default, _s.mlAuto].join(' ')}>
-              <Button
-                isText
-                backgroundColor='none'
-                color='brand'
-                to='/search/people'
-              >
-                <Text size='small' color='inherit' weight='bold'>
-                  See All
-                </Text>
-              </Button>
-            </div>
-          </div>
-
-          {
-            results.get('accounts').slice(0, size).map(accountId => <Account compact key={accountId} id={accountId} />)
-          }
-        </div>
-      );
-    }
-
-    if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
-      const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
-      groups = (
-        <div className='search-results__section'>
-          <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.groups' defaultMessage='Groups' /></h5>
-          {results.get('groups').slice(0, size).map(group => <GroupListItem key={`search-${group.get('name')}`} group={group} />)}
-        </div>
-      );
-    }
-
-    if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
-      const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
-      hashtags = (
-        <div className='search-results__section'>
-          <h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
-          {results.get('hashtags').slice(0, size).map(hashtag => <HashtagItem key={hashtag.get('name')} hashtag={hashtag} />)}
-        </div>
-      );
-    }
-
-    return (
-      <Block>
-        {accounts}
-        {groups}
-        {statuses}
-        {hashtags}
-      </Block>
-    )
-  }
-
-}

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

@@ -10,8 +10,6 @@ import {
 import { mascot } from '../../initial_state';
 import Motion from '../ui/util/optional_motion';
 import ComposeFormContainer from './containers/compose_form_container';
-// import SearchContainer from './containers/search_container';
-import SearchResults from './components/search_results';
 import NavigationBar from './components/navigation_bar';
 import elephantUIPlane from '../../../images/logo_ui_column_footer.png';
 
@@ -89,14 +87,6 @@ class Compose extends ImmutablePureComponent {
               <img alt='' draggable='false' src={mascot || elephantUIPlane} />
             </div>
           </div>}
-
-          <Motion defaultStyle={{ x: isSearchPage ? 0 : -100 }} style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
-            {({ x }) => (
-              <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
-                <SearchResults />
-              </div>
-            )}
-          </Motion>
         </div>
       </div>
     );

app/javascript/gabsocial/features/generic_not_found.js

@@ -1,4 +1,4 @@
-import ColumnIndicator from '../components/column_indicator';
+import ColumnIndicator from '../components/column_indicator'
 
 export default class GenericNotFound extends PureComponent {
 

app/javascript/gabsocial/features/groups_timeline/components/column_settings.js

@@ -1,29 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import SettingSwitch from '../../../../components/setting_switch';
-
-export default
-@injectIntl
-class ColumnSettings extends PureComponent {
-
-  static propTypes = {
-    settings: ImmutablePropTypes.map.isRequired,
-    onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  render () {
-    const { settings, onChange } = this.props;
-
-    return (
-      <div>
-        <span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
-
-        <div className='column-settings__row'>
-          <SettingSwitch prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
-        </div>
-      </div>
-    );
-  }
-
-}

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

@@ -1,76 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
-import Button from '../../../../components/button';
-
-const messages = defineMessages({
-	join: { id: 'groups.join', defaultMessage: 'Join group' },
-	leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
-	removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
-	edit: { id: 'groups.edit', defaultMessage: 'Edit' }
-});
-
-export default
-@injectIntl
-class Header extends ImmutablePureComponent {
-	static propTypes = {
-		group: ImmutablePropTypes.map,
-		relationships: ImmutablePropTypes.map,
-		toggleMembership: PropTypes.func.isRequired,
-	};
-
-	static contextTypes = {
-		router: PropTypes.object,
-	};
-
-getActionButton() {
-		const { group, relationships, toggleMembership, intl } = this.props;
-		const toggle = () => toggleMembership(group, relationships);
-
-		if (!relationships) {
-			return '';
-		} else if (!relationships.get('member')) {
-			return <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={toggle} />;
-		} else if (relationships.get('member')) {
-			return <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={toggle} />;
-		}
-	}
-
-	getAdminMenu() {
-		const { group, intl } = this.props;
-
-		const menu = [
-			{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
-			{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed-accounts` },
-		];
-
-		// <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;
-		return <div></div>
-	}
-
-	render () {
-		const { group, relationships } = this.props;
-
-		if (!group || !relationships) {
-			return null;
-		}
-
-		return (
-			<div className='group__header-container'>
-				<div className="group__header">
-					<div className='group__cover'>
-						<img src={group.get('cover_image_url')} alt='' className='parallax' />
-					</div>
-					
-					<div className='group__tabs'>
-						<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}`}>Posts</NavLink>
-						<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}/members`}>Members</NavLink>
-						{this.getActionButton()}
-						{relationships.get('admin') && this.getAdminMenu()}
-					</div>
-				</div>
-			</div>
-		);
-	}
-}

app/javascript/gabsocial/features/groups_timeline/components/panel.js

@@ -1,36 +0,0 @@
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-    group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
-    group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
-});
-
-// : todo :
-
-export default
-@injectIntl
-class GroupPanel extends ImmutablePureComponent {
-    static propTypes = {
-        group: ImmutablePropTypes.map,
-        relationships: ImmutablePropTypes.map,
-    }
-
-    render() {
-        const { group, relationships, intl } = this.props;
-
-        return (
-            <div className="group__panel">
-                <h1 className="group__panel__title">
-                    {group.get('title')}
-                    {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
-                </h1>
-
-                {relationships.get('admin') && <span className="group__panel__label">{intl.formatMessage(messages.group_admin)}</span>}
-
-                <div className="group__panel__description">{group.get('description')}</div>
-            </div>
-        );
-    }
-}

app/javascript/gabsocial/features/groups_timeline/containers/column_settings_container.js

@@ -1,20 +0,0 @@
-import ColumnSettings from '../components/column_settings';
-import { changeSetting, saveSettings } from '../../../../actions/settings';
-
-const mapStateToProps = (state) => ({
-  settings: state.getIn(['settings', 'group']),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-
-  onChange (key, checked) {
-    dispatch(changeSetting(['group', ...key], checked));
-  },
-
-  onSave () {
-    dispatch(saveSettings());
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);

app/javascript/gabsocial/features/groups_timeline/containers/header_container.js

@@ -1,19 +0,0 @@
-import Header from '../components/header';
-import { joinGroup, leaveGroup } from '../../../../actions/groups';
-
-const mapStateToProps = (state, { groupId }) => ({
-    group: state.getIn(['groups', groupId]),
-    relationships: state.getIn(['group_relationships', groupId]),
-});
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-    toggleMembership (group, relationships) {
-        if (relationships.get('member')) {
-            dispatch(leaveGroup(group.get('id')));
-        } else {
-            dispatch(joinGroup(group.get('id')));
-        }
-    },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header);

app/javascript/gabsocial/features/search.js

@@ -1,18 +1,118 @@
-// import SearchContainer from '../compose/containers/search_container';
+import ImmutablePropTypes from 'react-immutable-proptypes'
-import SearchResults from './compose/components/search_results';
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { FormattedMessage } from 'react-intl'
+import { withRouter } from 'react-router-dom'
+import { fetchSuggestions, dismissSuggestion } from '../actions/suggestions'
+import HashtagItem from '../components/hashtag_item'
+import Icon from '../components/icon'
+import { WhoToFollowPanel } from '../components/panel'
+// import TrendsPanel from '../ui/components/trends_panel'
+import GroupListItem from '../components/group_list_item'
+import Block from '../components/block'
+import Heading from '../components/heading'
+import Button from '../components/button'
+import Text from '../components/text'
+import Account from '../components/account'
 
-export default class Search extends PureComponent {
+const mapStateToProps = (state) => ({
+  results: state.getIn(['search', 'results']),
+  suggestions: state.getIn(['suggestions', 'items']),
+});
 
-  render() {
+const mapDispatchToProps = (dispatch) => ({
+  fetchSuggestions: () => dispatch(fetchSuggestions()),
+  dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
+});
+
+export default
+@withRouter
+@connect(mapStateToProps, mapDispatchToProps)
+class Search extends ImmutablePureComponent {
+
+  static propTypes = {
+    results: ImmutablePropTypes.map.isRequired,
+    location: PropTypes.object,
+  }
+
+  state = {
+    isSmallScreen: (window.innerWidth <= 895),
+  }
+
+  render () {
+    const { results, location } = this.props
+    const { isSmallScreen } = this.state
+
+    if (results.isEmpty() && isSmallScreen) {
       return (
-      <div className='column search-page'>
+        <div />
-        { /* <SearchContainer /> */ }
+      )
+    }
 
-        <div className='drawer__pager'>
+    const pathname = location.pathname || ''
-          <div className='drawer__inner darker'>
+    const showPeople = pathname === '/search/people'
-            <SearchResults />
+    const showHashtags = pathname === '/search/hashtags'
+    const showGroups = pathname === '/search/groups'
+    const isTop = !showPeople && !showHashtags && !showGroups
+
+    let accounts, statuses, hashtags, groups
+
+    if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
+      const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
+      accounts = (
+        <Block>
+          <div className={[_s.default, _s.py15].join(' ')}>
+            <div className={[_s.default, _s.flexRow, _s.mb15, _s.px15].join(' ')}>
+              <Heading size='h2'>
+                People
+              </Heading>
+              <div className={[_s.default, _s.mlAuto].join(' ')}>
+                <Button
+                  isText
+                  backgroundColor='none'
+                  color='brand'
+                  to='/search/people'
+                >
+                  <Text size='small' color='inherit' weight='bold'>
+                    See All
+                  </Text>
+                </Button>
               </div>
             </div>
+
+            {
+              results.get('accounts').slice(0, size).map(accountId => <Account compact key={accountId} id={accountId} />)
+            }
+          </div>
+        </Block>
+      )
+    }
+
+    if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
+      const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
+      groups = (
+        <div className='search-results__section'>
+          <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.groups' defaultMessage='Groups' /></h5>
+          {results.get('groups').slice(0, size).map(group => <GroupListItem key={`search-${group.get('name')}`} group={group} />)}
+        </div>
+      );
+    }
+
+    if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
+      const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
+      hashtags = (
+        <div className='search-results__section'>
+          <h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
+          {results.get('hashtags').slice(0, size).map(hashtag => <HashtagItem isCompact key={hashtag.get('name')} hashtag={hashtag} />)}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        {accounts}
+        {groups}
+        {statuses}
+        {hashtags}
       </div>
     )
   }

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

@@ -478,21 +478,22 @@ class UI extends PureComponent {
     const { draggingOver } = this.state
     const { children, location } = this.props
 
-    const handlers = me ? {
+    // : todo :
-      help: this.handleHotkeyToggleHelp,
+    // const handlers = me ? {
-      new: this.handleHotkeyNew,
+    //   help: this.handleHotkeyToggleHelp,
-      search: this.handleHotkeySearch,
+    //   new: this.handleHotkeyNew,
-      forceNew: this.handleHotkeyForceNew,
+    //   search: this.handleHotkeySearch,
-      back: this.handleHotkeyBack,
+    //   forceNew: this.handleHotkeyForceNew,
-      goToHome: this.handleHotkeyGoToHome,
+    //   back: this.handleHotkeyBack,
-      goToNotifications: this.handleHotkeyGoToNotifications,
+    //   goToHome: this.handleHotkeyGoToHome,
-      goToStart: this.handleHotkeyGoToStart,
+    //   goToNotifications: this.handleHotkeyGoToNotifications,
-      goToFavorites: this.handleHotkeyGoToFavorites,
+    //   goToStart: this.handleHotkeyGoToStart,
-      goToProfile: this.handleHotkeyGoToProfile,
+    //   goToFavorites: this.handleHotkeyGoToFavorites,
-      goToBlocked: this.handleHotkeyGoToBlocked,
+    //   goToProfile: this.handleHotkeyGoToProfile,
-      goToMuted: this.handleHotkeyGoToMuted,
+    //   goToBlocked: this.handleHotkeyGoToBlocked,
-      goToRequests: this.handleHotkeyGoToRequests,
+    //   goToMuted: this.handleHotkeyGoToMuted,
-    } : {}
+    //   goToRequests: this.handleHotkeyGoToRequests,
+    // } : {}
 
     return (
       <div ref={this.setRef}>

app/javascript/gabsocial/layouts/profile_layout.js

@@ -23,7 +23,6 @@ export default class ProfileLayout extends ImmutablePureComponent {
     return (
       <Layout
         noRightSidebar
-        noHeader
         noComposeButton
       >
         <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pr15].join(' ')}>

app/javascript/gabsocial/layouts/search_layout.js

@@ -1,87 +0,0 @@
-import Sticky from 'react-stickynode'
-import Search from '../components/search'
-import ColumnHeader from '../components/column_header'
-import Sidebar from '../components/sidebar'
-
-export default class SearchLayout extends PureComponent {
-  static propTypes = {
-    actions: PropTypes.array,
-    layout: PropTypes.object,
-    showBackBtn: PropTypes.bool,
-  }
-
-  render() {
-    const { children, showBackBtn, layout, actions } = this.props
-
-    const tabs = [
-      {
-        title: 'Top',
-        to: '/search'
-      },
-      {
-        title: 'People',
-        to: '/search/people'
-      },
-      {
-        title: 'Groups',
-        to: '/search/groups'
-      },
-      {
-        title: 'Gabs',
-        to: '/search/gabs'
-      },
-      {
-        title: 'Hashtags',
-        to: '/search/hashtags'
-      },
-    ]
-
-
-    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.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
-
-          <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
-            <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
-              <div className={[_s.default, _s.width645PX].join(' ')}>
-                <ColumnHeader
-                  title={'Search'}
-                  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.pl15, _s.py15].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/pages/search_page.js

@@ -3,7 +3,7 @@ import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
 import LinkFooter from '../components/link_footer'
 import SearchFilterPanel from '../components/panel/search_filter_panel'
-import SearchLayout from '../layouts/search_layout'
+import Layout from '../layouts/layout'
 
 const messages = defineMessages({
   search: { id: 'search', defaultMessage: 'Search' },
@@ -24,9 +24,39 @@ class SearchPage extends PureComponent {
       children,
     } = this.props
 
+    const title = intl.formatMessage(messages.search)
+    const tabs = [
+      {
+        title: 'Top',
+        to: '/search'
+      },
+      {
+        title: 'People',
+        to: '/search/people'
+      },
+      {
+        title: 'Groups',
+        to: '/search/groups'
+      },
+      {
+        title: 'Gabs',
+        to: '/search/gabs'
+      },
+      {
+        title: 'Trends',
+        to: '/search/trends'
+      },
+      {
+        title: 'Hashtags',
+        to: '/search/hashtags'
+      },
+    ]
+
     return (
-      <SearchLayout
+      <Layout
+        title={title}
         showBackBtn
+        tabs={tabs}
         layout={(
           <Fragment>
             <SearchFilterPanel />
@@ -34,9 +64,9 @@ class SearchPage extends PureComponent {
           </Fragment>
         )}
       >
-        <PageTitle path={intl.formatMessage(messages.search)} />
+        <PageTitle path={title} />
         {children}
-      </SearchLayout>
+      </Layout>
     )
   }
 

app/javascript/gabsocial/utils/numbers.js

@@ -1,14 +1,18 @@
 import { Fragment } from 'react'
 import { FormattedNumber } from 'react-intl'
 
-export const shortNumberFormat = number => {
+export const shortNumberFormat = (number) => {
   if (number < 1000) {
+    try {
+      return (<FormattedNumber value={number} />).props.value
+    } catch (error) {
       return <FormattedNumber value={number} />
     }
+  }
 
   return (
     <Fragment>
-      <FormattedNumber value={number / 1000} maximumFractionDigits={1} />K
+      <FormattedNumber value={number / 1000} maximumFractionDigits={1} />
     </Fragment>
   )
 }

app/javascript/styles/global.css

@@ -45,13 +45,13 @@
   --solid_color_secondary: #4f5050;
   --solid_color_secondary-dark: #424343;
   --solid_color_tertiary: #333;
-  --solid_color_block: #3d3d3d;
+  --solid_color_block: #2d2d2d;
 
   --text_color_primary: #fff;
   --text_color_secondary: #7b7b7b;
   --text_color_tertiary: #656565;
 
-  --border_color_secondary: #424141;*/
+  --border_color_secondary: #424141; */
 
   /* BLACK THEME */
   /* --solid_color_primary: #13171b;
@@ -243,6 +243,7 @@ body {
 .bottomRightRadiusSmall { border-bottom-right-radius: var(--radius-small); }
 .bottomLeftRadiusSmall { border-bottom-left-radius: var(--radius-small); }
 
+.borderColorWhite { border-color: var(--color_white); }
 .borderColorPrimary { border-color: var(--solid_color_primary); }
 .borderColorSecondary { border-color: var(--border_color_secondary); }
 .borderColorBrand { border-color: var(--color_brand); }
@@ -589,7 +590,7 @@ body {
 
 .pt5625PC { padding-top: 56.25%; }
 .pt25PC { padding-top: 25%; }
-
+.pt53PX { padding-top: 53px; }
 .pt15 { padding-top: 15px; }
 .pt10 { padding-top: 10px; }
 .pt5 { padding-top: 5px; }
@@ -712,6 +713,16 @@ body {
   position: absolute;
 } */
 
+.visiblyHidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  composes: posAbs;
+}
+
 .visibilityHidden {
   visibility: hidden;
 }