Added Gab Deck initial mvp

• Added:
- Gab Deck initial mvp

app/controllers/react_controller.rb

@@ -52,7 +52,7 @@ class ReactController < ApplicationController
   end
 
   def find_route_matches
-    request.path.match(/\A\/(home|news|api|suggestions|links|chat_conversations|chat_conversation_accounts|messages|shortcuts|group|groups|list|lists|notifications|tags|compose|follow_requests|admin|account|settings|filters|timeline|blocks|mutes)/)
+    request.path.match(/\A\/(home|news|api|deck|suggestions|links|chat_conversations|chat_conversation_accounts|messages|shortcuts|group|groups|list|lists|notifications|tags|compose|follow_requests|admin|account|settings|filters|timeline|blocks|mutes)/)
   end
 
   def find_public_route_matches

app/javascript/gabsocial/components/deck_column.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import DeckColumnHeader from './deck_column_header'
+
+class DeckColumn extends React.PureComponent {
+
+  render() {
+    const {
+      title,
+      subtitle,
+      icon,
+      children,
+    } = 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} />
+          <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.boxShadowNone, _s.posAbs, _s.top60PX, _s.left0, _s.right0, _s.bottom0].join(' ')}>
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+DeckColumn.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  icon: PropTypes.string,
+}
+
+export default DeckColumn

app/javascript/gabsocial/components/deck_column_header.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Icon from './icon'
+import Text from './text'
+import Button from './button'
+
+class DeckColumnHeader extends React.PureComponent {
+
+  render() {
+    const {
+      title,
+      subtitle,
+      icon,
+      children,
+    } = this.props
+
+    return (
+      <div className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.h60PX, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgPrimary].join(' ')}>
+        <Icon id={icon} className={_s.cPrimary} size='20px' />
+        <div className={[_s.d, _s.flexRow, _s.aiEnd, _s.ml15].join(' ')}>
+          <Text size='large' weight='medium'>{title}</Text>
+          { !!subtitle && <Text className={_s.ml5} size='small' color='secondary'>{subtitle}</Text> }
+        </div>
+        <div className={[_s.d, _s.aiCenter, _s.mlAuto, _s.jcCenter].join(' ')}>
+          <Button
+            color='primary'
+            backgroundColor='none'
+            icon='list'
+          />
+        </div>
+      </div>
+    )
+  }
+
+}
+
+DeckColumnHeader.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  icon: PropTypes.string,
+}
+
+export default DeckColumnHeader

app/javascript/gabsocial/components/display_name.js

@@ -75,6 +75,7 @@ class DisplayName extends ImmutablePureComponent {
       isSmall,
       isComment,
       isCentered,
+      isInline,
     } = this.props
 
     if (!account) return null
@@ -86,6 +87,7 @@ class DisplayName extends ImmutablePureComponent {
       flexRow: !isMultiline,
       cursorPointer: !noHover,
       aiCenter: isCentered,
+      displayInlineBlock: isInline,
     })
 
     const displayNameClasses = CX({
@@ -209,6 +211,7 @@ DisplayName.propTypes = {
   noUsername: PropTypes.bool,
   isComment: PropTypes.bool,
   isCentered: PropTypes.bool,
+  isInline: PropTypes.bool,
 }
 
 export default (connect(null, mapDispatchToProps)(DisplayName))

app/javascript/gabsocial/components/notification.js

@@ -33,6 +33,7 @@ class Notification extends ImmutablePureComponent {
       statusId,
       isHidden,
       isUnread,
+      isCompact,
     } = this.props
     
     const count = !!accounts ? accounts.size : 0
@@ -92,7 +93,7 @@ class Notification extends ImmutablePureComponent {
 
     const containerClasses = CX({
       d: 1,
-      px10: 1,
+      px10: !isCompact,
       cursorPointer: 1,
       bgSubtle_onHover: !isUnread,
       highlightedComment: isUnread,
@@ -107,9 +108,12 @@ class Notification extends ImmutablePureComponent {
         <div className={[_s.d, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
           <div className={[_s.d, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
+            {
+              !isCompact &&
               <Responsive min={BREAKPOINT_EXTRA_SMALL}>
                 <Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
               </Responsive>
+            }
 
             <div className={[_s.d, _s.flexNormal].join(' ')}>
               <div className={[_s.d, _s.flexRow, _s.flexWrap].join(' ')}>
@@ -126,11 +130,11 @@ class Notification extends ImmutablePureComponent {
                 }
               </div>
               <div className={[_s.d, _s.pt5].join(' ')}>
-                <div className={[_s.d, _s.flexRow, _s.aiEnd].join(' ')}>
+                <div className={[_s.d, _s.displayInline].join(' ')}>
                   <div className={_s.text}>
                     {
                       accounts && accounts.slice(0, 1).map((account, i) => (
-                        <DisplayName key={i} account={account} noUsername />
+                        <DisplayName key={i} account={account} noUsername isInline />
                       ))
                     }
                   </div>
@@ -191,6 +195,7 @@ Notification.propTypes = {
   type: PropTypes.string.isRequired,
   isHidden: PropTypes.bool,
   isUnread: PropTypes.bool,
+  isCompact: PropTypes.bool,
 }
 
 export default injectIntl(Notification)

app/javascript/gabsocial/components/popover/sidebar_more_popover.js

@@ -14,6 +14,10 @@ class SidebarMorePopover extends React.PureComponent {
     this.props.onOpenDisplayModal()
   }
 
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
   render() {
     const { intl, isXS } = this.props
 
@@ -29,6 +33,11 @@ class SidebarMorePopover extends React.PureComponent {
               title: intl.formatMessage(messages.help),
               href: 'https://help.gab.com',
             },
+            {
+              title: 'Gab Deck',
+              to: '/deck',
+              onClick: this.handleOnClosePopover,
+            },
             {
               title: intl.formatMessage(messages.display),
               onClick: this.handleOnOpenDisplayModal,
@@ -66,6 +75,9 @@ const messages = defineMessages({
 })
 
 const mapDispatchToProps = (dispatch) => ({
+  onClosePopover() {
+    dispatch(closePopover())
+  },
   onOpenDisplayModal: () => {
     dispatch(closePopover())
     dispatch(openModal(MODAL_DISPLAY_OPTIONS))

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

@@ -0,0 +1,205 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { openPopover } from '../../actions/popover'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import { resendUserConfirmationEmail } from '../../actions/user'
+import { openModal } from '../../actions/modal'
+import {
+  BREAKPOINT_EXTRA_SMALL,
+  MODAL_EMAIL_CONFIRMATION_REMINDER,
+} from '../../constants'
+import {
+  me,
+  meEmail,
+  emailConfirmed,
+} from '../../initial_state'
+import { makeGetAccount } from '../../selectors'
+import Responsive from '../../features/ui/util/responsive_component'
+import {
+  CX,
+  THEMES,
+  DEFAULT_THEME,
+  POPOVER_NAV_SETTINGS,
+} from '../../constants'
+import Avatar from '../avatar'
+import BackButton from '../back_button'
+import Button from '../button'
+import Heading from '../heading'
+import Icon from '../icon'
+import NavigationBarButton from '../navigation_bar_button'
+import Search from '../search'
+import Text from '../text'
+import Divider from '../divider'
+
+class DeckSidebar extends ImmutablePureComponent {
+
+  handleOnClickLightBulb = () => {
+    let index = THEMES.findIndex((t) => t === this.props.theme)
+    const nextIndex = (index === THEMES.length -1) ? 0 : index += 1
+    const newTheme = THEMES[nextIndex]
+    this.props.onChange('theme', newTheme)
+  }
+
+  handleOnOpenNavSettingsPopover = () => {
+    this.props.onOpenNavSettingsPopover(this.avatarNode)
+  }
+
+  handleOnClickResendConfirmationEmail = () => {
+    const { emailConfirmationResends } = this.props
+    if (emailConfirmationResends % 2 === 0 && emailConfirmationResends > 0) {
+      this.props.onOpenEmailModal()
+    }
+    this.props.onResendUserConfirmationEmail()
+  }
+
+  setAvatarNode = (c) => {
+    this.avatarNode = c
+  }
+
+  render() {
+    const {
+      title,
+      showBackBtn,
+      actions,
+      tabs,
+      account,
+      noActions,
+      logoDisabled,
+      unreadChatsCount,
+      notificationCount,
+    } = this.props
+
+    const navigationContainerClasses = CX({
+      d: 1,
+      z4: 1,
+      w76PX: 1,
+      w100PC: 1,
+    })
+
+    const innerNavigationContainerClasses = CX({
+      d: 1,
+      w76PX: 1,
+      bgNavigation: 1,
+      aiCenter: 1,
+      z3: 1,
+      top0: 1,
+      bottom0: 1,
+      left0: 1,
+      borderRight1PX: 1,
+      borderColorSecondary: 1,
+      posFixed: 1,
+    })
+
+    const isHome = title === 'Home'
+
+    return (
+      <div className={navigationContainerClasses}>
+
+        <div className={innerNavigationContainerClasses}>
+
+          <div className={[_s.d, _s.flexRow, _s.w76PX, _s.h100PC].join(' ')}>
+
+            <div className={[_s.d].join(' ')}>
+
+              <h1 className={[_s.d].join(' ')}>
+                <Button
+                  to='/'
+                  isText
+                  title='Gab'
+                  aria-label='Gab'
+                  color='none'
+                  backgroundColor='none'
+                  className={[_s.d, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr5].join(' ')}
+                >
+                  <Icon id='logo' className={_s.fillNavigationBrand} minimizeLogo={logoDisabled} />
+                </Button>
+              </h1>
+
+              <div className={[_s.d, _s.px10].join(' ')}>
+
+                <NavigationBarButton icon='pencil' />
+                
+                <NavigationBarButton icon='search' />
+
+                <Divider isSmall />
+
+                <Divider isSmall />
+
+                <NavigationBarButton title='&nbsp;' icon='add' />
+              </div>
+
+              <div className={[_s.d, _s.mtAuto, _s.aiCenter].join(' ')}>
+
+                <Divider isSmall />
+
+                <NavigationBarButton attrTitle='Dark/Muted/Light/White Mode' icon='light-bulb' onClick={this.handleOnClickLightBulb} />
+
+                <button
+                  ref={this.setAvatarNode}
+                  title={account.get('display_name')}
+                  onClick={this.handleOnOpenNavSettingsPopover}
+                  className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.d, _s.jcCenter].join(' ')}
+                >
+                  <Avatar account={account} size={34} noHover />
+                </button>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state) => ({
+  account: makeGetAccount()(state, me),
+  emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0),
+  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
+  logoDisabled: state.getIn(['settings', 'displayOptions', 'logoDisabled'], false),
+  notificationCount: state.getIn(['notifications', 'unread']),
+  unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onOpenNavSettingsPopover(targetRef) {
+    dispatch(openPopover(POPOVER_NAV_SETTINGS, {
+      targetRef,
+      position: 'left-end',
+    }))
+  },
+  onOpenEmailModal() {
+    dispatch(openModal(MODAL_EMAIL_CONFIRMATION_REMINDER))
+  },
+  onResendUserConfirmationEmail() {
+    dispatch(resendUserConfirmationEmail())
+  },
+  onChange(key, value) {
+    dispatch(changeSetting(['displayOptions', key], value))
+    dispatch(saveSettings())
+  },
+})
+
+DeckSidebar.propTypes = {
+  account: ImmutablePropTypes.map,
+  actions: PropTypes.array,
+  tabs: PropTypes.array,
+  title: PropTypes.string,
+  showBackBtn: PropTypes.bool,
+  notificationCount: PropTypes.number.isRequired,
+  unreadChatsCount: PropTypes.number.isRequired,
+  onOpenNavSettingsPopover: PropTypes.func.isRequired,
+  onOpenEmailModal: PropTypes.func.isRequired,
+  onResendUserConfirmationEmail: PropTypes.func.isRequired,
+  emailConfirmationResends: PropTypes.number.isRequired,
+  noActions: PropTypes.bool,
+  theme: PropTypes.string,
+  logoDisabled: PropTypes.bool,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DeckSidebar)

app/javascript/gabsocial/components/status.js

@@ -309,6 +309,7 @@ class Status extends ImmutablePureComponent {
       isComposeModalOpen,
       commentSortingType,
       onOpenProModal,
+      isCompact,
     } = this.props
     // const { height } = this.state
 
@@ -361,7 +362,7 @@ class Status extends ImmutablePureComponent {
     }
 
     const parentClasses = CX({
-      pb15: !isChild,
+      pb15: !isChild && !isCompact,
     })
 
     const containerClasses = CX({
@@ -437,6 +438,7 @@ class Status extends ImmutablePureComponent {
                   <StatusHeader
                     status={status}
                     reduced={isChild}
+                    isCompact={isCompact}
                   />
 
                   <div className={_s.d}>
@@ -451,7 +453,7 @@ class Status extends ImmutablePureComponent {
                   </div>
 
                   <StatusMedia
-                    isChild={isChild}
+                    isChild={isChild || isCompact}
                     isComposeModalOpen={isComposeModalOpen}
                     status={status}
                     onOpenMedia={this.props.onOpenMedia}
@@ -490,11 +492,12 @@ class Status extends ImmutablePureComponent {
                       onOpenLikes={this.props.onOpenLikes}
                       onOpenReposts={this.props.onOpenReposts}
                       onQuote={this.handleOnQuote}
+                      isCompact={isCompact}
                     />
                   }
 
                   {
-                    !isChild && !!me &&
+                    !isChild && !!me && !isCompact &&
                     <ResponsiveClassesComponent
                       classNames={[_s.d, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}
                       classNamesXS={[_s.d, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px10, _s.mb10].join(' ')}

app/javascript/gabsocial/components/status_action_bar.js

@@ -46,7 +46,11 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   render() {
-    const { status, intl } = this.props
+    const {
+      status,
+      intl,
+      isCompact,
+    } = this.props
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))
 
@@ -66,7 +70,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
     const containerClasses = CX({
       d: 1,
-      px10: 1,
+      px10: !isCompact,
       mt10: !shouldCondense,
       mt5: shouldCondense,
     })
@@ -76,8 +80,9 @@ class StatusActionBar extends ImmutablePureComponent {
       py2: 1,
       flexRow: 1,
       w100PC: 1,
-      borderTop1PX: !shouldCondense,
-      borderColorSecondary: !shouldCondense,
+      borderTop1PX: !shouldCondense && !isCompact,
+      borderColorSecondary: !shouldCondense || isCompact,
+      borderBottom1PX: isCompact,
       mt5: hasInteractions,
     })
 
@@ -105,11 +110,19 @@ class StatusActionBar extends ImmutablePureComponent {
       py5: 1,
     })
 
+    const interactionContainerClasses = CX({
+      d: 1,
+      flexRow: 1,
+      aiEnd: 1,
+      px5: !isCompact,
+      px15: isCompact,
+    })
+
     return (
       <div className={containerClasses}>
         {
           hasInteractions && 
-          <div className={[_s.d, _s.flexRow, _s.aiEnd, _s.px5].join(' ')}>
+          <div className={interactionContainerClasses}>
             {
               favoriteCount > 0 &&
               <button
@@ -156,11 +169,13 @@ class StatusActionBar extends ImmutablePureComponent {
               icon={!!status.get('favourited') ? 'liked' : 'like'}
               active={!!status.get('favourited')}
               onClick={this.handleFavoriteClick}
+              isCompact={isCompact}
             />
             <StatusActionBarItem
               title={intl.formatMessage(messages.comment)}
               icon='comment'
               onClick={this.handleReplyClick}
+              isCompact={isCompact}
             />
             <StatusActionBarItem
               title={intl.formatMessage(messages.repost)}
@@ -169,6 +184,7 @@ class StatusActionBar extends ImmutablePureComponent {
               disabled={!publicStatus}
               active={!!status.get('reblogged')}
               onClick={this.handleRepostClick}
+              isCompact={isCompact}
             />
             <StatusActionBarItem
               title={intl.formatMessage(messages.quote)}
@@ -176,6 +192,7 @@ class StatusActionBar extends ImmutablePureComponent {
               icon={!publicStatus ? 'lock' : 'quote'}
               disabled={!publicStatus}
               onClick={this.handleQuoteClick}
+              isCompact={isCompact}
             />
             <StatusActionBarItem
               title={intl.formatMessage(messages.share)}
@@ -183,6 +200,7 @@ class StatusActionBar extends ImmutablePureComponent {
               buttonRef={this.setShareButton}
               icon='share'
               onClick={this.handleShareClick}
+              isCompact={isCompact}
             />
           </div>
         </div>
@@ -214,6 +232,7 @@ StatusActionBar.propTypes = {
   status: ImmutablePropTypes.map.isRequired,
   onOpenLikes: PropTypes.func.isRequired,
   onOpenReposts: PropTypes.func.isRequired,
+  isCompact: PropTypes.bool,
 }
 
 export default injectIntl(StatusActionBar)

app/javascript/gabsocial/components/status_action_bar_item.js

@@ -18,20 +18,21 @@ class StatusActionBarItem extends React.PureComponent {
       active,
       disabled,
       buttonRef,
-      altTitle
+      altTitle,
+      isCompact,
     } = this.props
 
     const btnClasses = CX({
       jcCenter: 1,
       aiCenter: 1,
-      px10: 1,
+      px10: !isCompact,
       bgSubtle_onHover: !disabled,
     })
 
     const iconClasses = CX({
       d: 1,
       inheritFill: 1,
-      mr10: !!title,
+      mr10: !!title && !isCompact,
     })
 
     const color = active ? 'brand' : 'secondary'
@@ -54,7 +55,7 @@ class StatusActionBarItem extends React.PureComponent {
           iconClassName={iconClasses}
         > 
           {
-            !!title &&
+            !!title && !isCompact &&
             <Responsive min={BREAKPOINT_SMALL}>
               <Text color='inherit' size='small' weight={weight}>
                 {title}
@@ -75,6 +76,7 @@ StatusActionBarItem.propTypes = {
   icon: PropTypes.string.isRequired,
   active: PropTypes.bool,
   disabled: PropTypes.bool,
+  isCompact: PropTypes.bool,
   buttonRef: PropTypes.oneOf([
     PropTypes.func,
     PropTypes.node,

app/javascript/gabsocial/components/status_header.js

@@ -37,6 +37,7 @@ class StatusHeader extends ImmutablePureComponent {
       intl,
       reduced,
       status,
+      isCompact,
     } = this.props
 
     const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`
@@ -48,7 +49,7 @@ class StatusHeader extends ImmutablePureComponent {
       pb10: reduced,
     })
 
-    const avatarSize = reduced ? 20 : 46
+    const avatarSize = reduced ? 20 : isCompact ? 38 : 46
 
     const visibility = status.get('visibility')
 
@@ -75,6 +76,13 @@ class StatusHeader extends ImmutablePureComponent {
       timeUntilExpiration = moment(expirationDate).fromNow()
     }
 
+    const textContainerClasses = CX({
+      d: 1,
+      aiStart: 1,
+      flexGrow1 :1,
+      mt5: !isCompact,
+    })
+
     return (
       <div className={containerClasses}>
         <div className={[_s.d, _s.flexRow, _s.mt5].join(' ')}>
@@ -90,7 +98,7 @@ class StatusHeader extends ImmutablePureComponent {
             </NavLink>
           }
 
-          <div className={[_s.d, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
+          <div className={textContainerClasses}>
 
             <div className={[_s.d, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
               <NavLink

app/javascript/gabsocial/components/timeline_injections/timeline_injection_layout.js

@@ -40,6 +40,7 @@ class TimelineInjectionLayout extends React.PureComponent {
       buttonHref,
       buttonTitle,
       isXS,
+      isCompact,
     } = this.props
     const { dismissed } = this.state
 
@@ -52,7 +53,7 @@ class TimelineInjectionLayout extends React.PureComponent {
       borderTop1PX: isXS,
       borderBottom1PX: isXS,
       border1PX: !isXS,
-      radiusSmall: !isXS,
+      radiusSmall: !isXS && !isCompact,
       borderColorSecondary: 1,
       bgPrimary: 1,
       overflowHidden: 1,
@@ -105,6 +106,11 @@ class TimelineInjectionLayout extends React.PureComponent {
 
 }
 
+
+const mapStateToProps = (state) => ({
+  isCompact: state.getIn(['settings', 'isCompact']),
+})
+
 TimelineInjectionLayout.propTypes = {
   title: PropTypes.string,
   buttonLink: PropTypes.string,
@@ -115,4 +121,4 @@ TimelineInjectionLayout.propTypes = {
   isXS: PropTypes.bool,
 }
 
-export default connect()(TimelineInjectionLayout)
+export default connect(mapStateToProps)(TimelineInjectionLayout)

app/javascript/gabsocial/containers/notification_container.js

@@ -18,6 +18,7 @@ const makeMapStateToProps = () => {
     const isReposts = !!props.notification.get('repost')
     const isGrouped = isFollows || isLikes || isReposts
     const lastReadId = state.getIn(['notifications', 'lastReadId'])
+    const isCompact = state.getIn(['settings', 'isCompact'])
 
     if (isFollows) {
       let lastUpdated
@@ -40,6 +41,7 @@ const makeMapStateToProps = () => {
         createdAt: lastUpdated,
         isUnread: isUnread,
         statusId: undefined,
+        isCompact,
       }
     } else if (isLikes || isReposts) {
       const theType = isLikes ? 'like' : 'repost'
@@ -62,6 +64,7 @@ const makeMapStateToProps = () => {
         createdAt: lastUpdated,
         isUnread: isUnread,
         statusId: list.get('status'),
+        isCompact,
       }
     } else if (!isGrouped) {
       const notification = getNotification(state, props.notification, props.notification.get('account'))
@@ -74,6 +77,7 @@ const makeMapStateToProps = () => {
         createdAt: notification.get('created_at'),
         isUnread: lastReadId < notification.get('id'),
         statusId: statusId || undefined,
+        isCompact,
       }
     }
   }

app/javascript/gabsocial/containers/status_container.js

@@ -183,6 +183,7 @@ const makeMapStateToProps = () => {
       isComment,
       commentSortingType,
       isComposeModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
+      isCompact: state.getIn(['settings', 'isCompact']),
     }
   }
 

app/javascript/gabsocial/features/deck.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import WrappedBundle from './ui/util/wrapped_bundle'
+import DeckColumn from '../components/deck_column'
+import {
+  AccountTimeline,
+  HomeTimeline,
+  Notifications,
+  HashtagTimeline,
+} from './ui/util/async_components'
+
+class Deck extends React.PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  componentDidMount () {
+    // this.props.connectDeck()
+  }
+
+  componentWillUnmount() {
+    // this.props.disconnectDeck()
+  }
+
+  render () {
+    const { account, children } = this.props
+
+    return (
+      <div className={[_s.d, _s.flexRow].join(' ')}>
+        <DeckColumn title='Home' icon='home'>
+          <WrappedBundle component={HomeTimeline} />
+        </DeckColumn>
+        <DeckColumn title='Notifications' icon='notifications'>
+          <WrappedBundle component={Notifications} />
+        </DeckColumn>
+        <DeckColumn title='Cashtag' icon='list' subtitle='$BTC'>
+          <WrappedBundle component={HashtagTimeline} componentParams={{ params: { id: 'btc' } }} />
+        </DeckColumn>
+        <DeckColumn title='Jonny' icon='group' subtitle='@admin'>
+          <WrappedBundle component={AccountTimeline} componentParams={{ account }} />
+        </DeckColumn>
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state) => ({
+  account: state.getIn(['accounts', '1']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  
+})
+
+Deck.propTypes = {
+  // 
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Deck)

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

@@ -23,6 +23,7 @@ export function ComposeForm() { return import(/* webpackChunkName: "components/c
 export function ComposeModal() { return import(/* webpackChunkName: "components/compose_modal" */'../../../components/modal/compose_modal') }
 export function ConfirmationModal() { return import(/* webpackChunkName: "components/confirmation_modal" */'../../../components/modal/confirmation_modal') }
 export function DatePickerPopover() { return import(/* webpackChunkName: "components/date_picker_popover" */'../../../components/popover/date_picker_popover') }
+export function Deck() { return import(/* webpackChunkName: "features/deck" */'../../deck') }
 export function DisplayOptionsModal() { return import(/* webpackChunkName: "components/display_options_modal" */'../../../components/modal/display_options_modal') }
 export function DMCA() { return import(/* webpackChunkName: "features/about/dmca" */'../../about/dmca') }
 export function EditProfileModal() { return import(/* webpackChunkName: "components/edit_profile_modal" */'../../../components/modal/edit_profile_modal') }

app/javascript/gabsocial/layouts/deck_layout.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  CX,
+  BREAKPOINT_EXTRA_SMALL,
+} from '../constants'
+import { me } from '../initial_state'
+import DeckSidebar from '../components/sidebar/deck_sidebar'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
+
+class DeckLayout extends React.PureComponent {
+
+  render() {
+    const { children, title } = this.props
+
+    const mainBlockClasses = CX({
+      d: 1,
+      w1015PX: 1,
+      flexRow: 1,
+      jcEnd: 1,
+      py15: 1,
+      mlAuto: !me,
+      mrAuto: !me,
+    })
+
+    return (
+      <div className={[_s.d, _s.w100PC, _s.h100VH, _s.bgTertiary].join(' ')}>
+        <DeckSidebar />
+        <div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.w76PX, _s.h100VH].join(' ')} />
+          <main role='main' className={[_s.d, _s.z1, _s.overflowXScroll, _s.noScrollbar].join(' ')}>
+            {children}
+          </main>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+DeckLayout.propTypes = {
+  title: PropTypes.string,
+}
+
+export default DeckLayout

app/javascript/gabsocial/pages/deck_page.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PageTitle from '../features/ui/util/page_title'
+import DeckLayout from '../layouts/deck_layout'
+
+class DeckPage extends React.PureComponent {
+
+  render() {
+    const { children } = this.props
+
+    return (
+      <DeckLayout>
+        <PageTitle path={'Deck'} />
+        {children}
+      </DeckLayout>
+    )
+  }
+
+}
+
+DeckPage.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default DeckPage

app/javascript/gabsocial/reducers/settings.js

@@ -21,6 +21,7 @@ const initialState = ImmutableMap({
   saved: true,
   shownOnboarding: false,
   skinTone: 1,
+  isCompact: false,
   commentSorting: COMMENT_SORTING_TYPE_OLDEST,
 
   // every dismiss reduces by half or set to zero for pwa, shop, pro

app/javascript/styles/global.css

@@ -389,6 +389,7 @@ pre {
 .displayNone { display: none; }
 .displayBlock { display: block; }
 .displayInline { display: inline; }
+.displayInlineBlock { display: inline-block; }
 .displayFlex { display: flex !important; }
 
 .cursorText { cursor: text; }
@@ -547,6 +548,7 @@ pre {
 .minH40PX { min-height: 40px; }
 .minH28PX { min-height: 28px; }
 
+.h100VH { height: 100vh; }
 .h100PC { height: 100%; }
 .h350PX { height: 350px; }
 .h260PX { height: 260px; }
@@ -590,6 +592,7 @@ pre {
 .w1255PX { width: 1255px; }
 .w1015PX { width: 1015px; }
 .w645PX { width: 645px; }
+.w360PX { width: 360px; }
 .w340PX { width: 340px; }
 .w330PX { width: 330px; }
 .w300PX { width: 300px; }

app/services/process_hashtags_service.rb

@@ -10,8 +10,6 @@ class ProcessHashtagsService < BaseService
 
       status.tags << tag
       records << tag
-
-      TrendingTags.record_use!(tag, status.account, status.created_at) if status.public_visibility?
     end
 
     return unless status.public_visibility? || status.unlisted_visibility?

config/settings.yml

@@ -82,6 +82,7 @@ defaults: &defaults
     - links
     - messages
     - message
+    - deck
   bootstrap_timeline_accounts: ''
 
 development: