Progess on Gab Deck

Progess on Gab Deck

app/javascript/gabsocial/components/deck_column.js

@@ -11,12 +11,19 @@ class DeckColumn extends React.PureComponent {
       icon,
       children,
       index,
+      noButtons,
     } = this.props
 
     return (
       <div className={[_s.d, _s.w360PX, _s.px2, _s.bgSecondary, _s.h100VH].join(' ')}>
         <div className={[_s.d, _s.w100PC, _s.bgPrimary, _s.h100VH].join(' ')}>
-          <DeckColumnHeader title={title} subtitle={subtitle} icon={icon} index={index} />
+          <DeckColumnHeader
+            title={title}
+            subtitle={subtitle}
+            icon={icon}
+            index={index}
+            noButtons={noButtons}
+          />
           <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.boxShadowNone, _s.posAbs, _s.top60PX, _s.left0, _s.right0, _s.bottom0].join(' ')}>
             {children}
           </div>
@@ -32,6 +39,7 @@ DeckColumn.propTypes = {
   subtitle: PropTypes.string,
   icon: PropTypes.string,
   index: PropTypes.number,
+  noButtons: PropTypes.bool,
 }
 
 export default DeckColumn

app/javascript/gabsocial/components/deck_column_header.js

@@ -22,6 +22,7 @@ class DeckColumnHeader extends React.PureComponent {
       subtitle,
       icon,
       children,
+      noButtons,
     } = this.props
 
     return (
@@ -40,7 +41,7 @@ class DeckColumnHeader extends React.PureComponent {
           { !!subtitle && <Text className={_s.ml5} color='secondary'>{subtitle}</Text> }
         </div>
         {
-          !!title &&
+          !!title && !noButtons &&
           <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.mlAuto, _s.jcCenter].join(' ')}>
             <Button
               isNarrow
@@ -71,6 +72,7 @@ DeckColumnHeader.propTypes = {
   subtitle: PropTypes.string,
   icon: PropTypes.string,
   index: PropTypes.number,
+  noButtons: PropTypes.bool,
 }
 
 export default connect()(DeckColumnHeader)

app/javascript/gabsocial/components/modal/deck_column_add_modal.js

@@ -21,6 +21,9 @@ class DeckColumnAddModal extends React.PureComponent {
       case 'group':
         // 
         break
+      case 'hashtag':
+        // 
+        break
       default:
         this.props.dispatch(setDeckColumnAtIndex(column))
         this.props.onClose()
@@ -51,11 +54,16 @@ class DeckColumnAddModal extends React.PureComponent {
             <DeckColumnAddModalButton icon='like' type='Likes' onClick={() => this.onAdd('likes')} />
             <DeckColumnAddModalButton icon='bookmark' type='Bookmarks' onClick={() => this.onAdd('bookmarks')} />
           </div>
-          <div className={[_s.d, _s.pl10, _s.pb10, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+          <div className={[_s.d, _s.pl10, _s.borderBottom1PX, _s.borderColorSecondary, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
             <DeckColumnAddModalButton icon='pro' type='PRO Timeline' onClick={() => this.onAdd('pro')} />
             <DeckColumnAddModalButton icon='pencil' type='Compose' onClick={() => this.onAdd('compose')} />
             <DeckColumnAddModalButton icon='group' type='Group Timeline' onClick={() => this.onAdd('group')} />
           </div>
+          <div className={[_s.d, _s.pl10, _s.pb10, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <DeckColumnAddModalButton icon='apps' type='Hashtag' onClick={() => this.onAdd('hashtag')} />
+            <DeckColumnAddModalButton icon='explore' type='Explore' onClick={() => this.onAdd('explore')} />
+            <DeckColumnAddModalButton icon='news' type='News' onClick={() => this.onAdd('news')} />
+          </div>
         </div>
       </ModalLayout>
     )

app/javascript/gabsocial/components/sidebar/deck_sidebar.js

@@ -49,6 +49,8 @@ class DeckSidebar extends ImmutablePureComponent {
 
   render() {
     const { account, logoDisabled } = this.props
+    
+    const isPro = !!account ? account.get('is_pro') : false
 
     return (
       <div className={[_s.d, _s.z4, _s.w76PX, _s.w100PC].join(' ')}>
@@ -83,7 +85,7 @@ class DeckSidebar extends ImmutablePureComponent {
 
                 <Divider isSmall />
 
-                <NavigationBarButton title='&nbsp;' icon='add' onClick={this.handleOnOpenNewColumnModel} />
+                { isPro && <NavigationBarButton title='&nbsp;' icon='add' onClick={this.handleOnOpenNewColumnModel} /> }
               </div>
 
               <div className={[_s.d, _s.mtAuto, _s.aiCenter].join(' ')}>