Updates to Gab Deck

• Updates:
- to Gab Deck

app/javascript/gabsocial/actions/deck.js

@@ -0,0 +1,20 @@
+import { me } from '../initial_state'
+
+export const DECK_CONNECT = 'DECK_CONNECT'
+export const DECK_DISCONNECT = 'DECK_DISCONNECT'
+
+export const DECK_SET_COLUMN_AT_INDEX = 'DECK_SET_COLUMN_AT_INDEX'
+
+export const deckConnect = () => ({
+  type: DECK_CONNECT,
+})
+
+export const deckDisconnect = () => ({
+  type: DECK_DISCONNECT,
+})
+
+export const setDeckColumnAtIndex = (column, index) => ({
+  type: DECK_SET_COLUMN_AT_INDEX,
+  column,
+  index,
+})

app/javascript/gabsocial/components/deck_column_header.js

@@ -16,17 +16,20 @@ class DeckColumnHeader extends React.PureComponent {
 
     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' />
+        { !!icon && <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>
+          { !!title && <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'
+            !!title &&
-            backgroundColor='none'
+            <Button
-            icon='list'
+              color='primary'
-          />
+              backgroundColor='none'
+              icon='list'
+            />
+          }
         </div>
       </div>
     )

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

@@ -0,0 +1,91 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { setDeckColumnAtIndex } from '../../actions/deck'
+import { saveSettings } from '../../actions/settings'
+import { openModal } from '../../actions/modal'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import Text from '../text'
+
+class DeckColumnAddModal extends React.PureComponent {
+
+  onAdd = (column) => {
+    switch (column) {
+      case 'user':
+        // 
+        break
+      case 'list':
+        // 
+        break
+      case 'groups':
+        // 
+        break
+      case 'group':
+        // 
+        break
+      default:
+        this.props.dispatch(setDeckColumnAtIndex(column))
+        this.props.dispatch(saveSettings())
+        break
+    }
+  }
+
+  render() {
+    const {
+      intl,
+      onClose,
+    } = this.props
+
+    return (
+      <ModalLayout
+        title='Choose a column type to add'
+        onClose={onClose}
+        width={520}
+      >
+        <div className={_s.d}>
+          <div className={[_s.d, _s.pl10, _s.borderBottom1PX, _s.borderColorSecondary, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <DeckColumnAddModalButton icon='home' type='Home' onClick={() => this.onAdd('home')} />
+            <DeckColumnAddModalButton icon='group' type='User' onClick={() => this.onAdd('user')} />
+            <DeckColumnAddModalButton icon='notifications' type='Notifications' onClick={() => this.onAdd('home')} />
+          </div>
+          <div className={[_s.d, _s.pl10, _s.borderBottom1PX, _s.borderColorSecondary, _s.flexRow, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <DeckColumnAddModalButton icon='list' type='List' onClick={() => this.onAdd('list')} />
+            <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(' ')}>
+            <DeckColumnAddModalButton icon='pro' type='PRO Timeline' onClick={() => this.onAdd('pro')} />
+            <DeckColumnAddModalButton icon='group' type='Groups Timeline' onClick={() => this.onAdd('groups')} />
+            <DeckColumnAddModalButton icon='group' type='Group Timeline' onClick={() => this.onAdd('group')} />
+          </div>
+        </div>
+      </ModalLayout>
+    )
+  }
+
+}
+
+const DeckColumnAddModalButton = ({ icon, type, onClick }) => (
+  <Button
+    radiusSmall
+    color='primary'
+    backgroundColor='none'
+    icon={icon}
+    iconSize='28px'
+    onClick={onClick}
+    iconClassName={[_s.px15, _s.pb5, _s.py10].join(' ')}
+    className={[_s.flexColumn, _s.bgSubtle_onHover, _s.my10, _s.mr10, _s.aiCenter, _s.flexNormal].join(' ')}
+  >
+    <Text color='inherit' size='medium' weight='medium' className={_s.pb5}>
+      {type}
+    </Text>
+  </Button>
+)
+
+
+DeckColumnAddModalButton.propTypes = {
+  onSetDeckColumnAtIndex: PropTypes.func.isRequired,
+}
+
+export default connect()(DeckColumnAddModal)

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

@@ -15,6 +15,7 @@ import {
   MODAL_COMMUNITY_TIMELINE_SETTINGS,
   MODAL_COMPOSE,
   MODAL_CONFIRM,
+  MODAL_DECK_COLUMN_ADD,
   MODAL_DISPLAY_OPTIONS,
   MODAL_EDIT_PROFILE,
   MODAL_EDIT_SHORTCUTS,
@@ -49,6 +50,7 @@ import {
   CommunityTimelineSettingsModal,
   ComposeModal,
   ConfirmationModal,
+  DeckColumnAddModal,
   DisplayOptionsModal,
   EditProfileModal,
   EditShortcutsModal,
@@ -86,6 +88,7 @@ const MODAL_COMPONENTS = {
   [MODAL_COMMUNITY_TIMELINE_SETTINGS]: CommunityTimelineSettingsModal,
   [MODAL_COMPOSE]: ComposeModal,
   [MODAL_CONFIRM]: ConfirmationModal,
+  [MODAL_DECK_COLUMN_ADD]: DeckColumnAddModal,
   [MODAL_DISPLAY_OPTIONS]: DisplayOptionsModal,
   [MODAL_EDIT_SHORTCUTS]: EditShortcutsModal,
   [MODAL_EDIT_PROFILE]: EditProfileModal,

app/javascript/gabsocial/components/notification.js

@@ -33,7 +33,7 @@ class Notification extends ImmutablePureComponent {
       statusId,
       isHidden,
       isUnread,
-      isCompact,
+      isDeckConnected,
     } = this.props
     
     const count = !!accounts ? accounts.size : 0
@@ -93,7 +93,7 @@ class Notification extends ImmutablePureComponent {
 
     const containerClasses = CX({
       d: 1,
-      px10: !isCompact,
+      px10: !isDeckConnected,
       cursorPointer: 1,
       bgSubtle_onHover: !isUnread,
       highlightedComment: isUnread,
@@ -109,7 +109,7 @@ class Notification extends ImmutablePureComponent {
           <div className={[_s.d, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
             {
-              !isCompact &&
+              !isDeckConnected &&
               <Responsive min={BREAKPOINT_EXTRA_SMALL}>
                 <Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
               </Responsive>
@@ -195,7 +195,7 @@ Notification.propTypes = {
   type: PropTypes.string.isRequired,
   isHidden: PropTypes.bool,
   isUnread: PropTypes.bool,
-  isCompact: PropTypes.bool,
+  isDeckConnected: PropTypes.bool,
 }
 
 export default injectIntl(Notification)

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

@@ -5,33 +5,20 @@ 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 {
+import { me } from '../../initial_state'
-  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,
+  MODAL_DECK_COLUMN_ADD,
 } 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 {
@@ -47,12 +34,8 @@ class DeckSidebar extends ImmutablePureComponent {
     this.props.onOpenNavSettingsPopover(this.avatarNode)
   }
 
-  handleOnClickResendConfirmationEmail = () => {
+  handleOnOpenNewColumnModel = () => {
-    const { emailConfirmationResends } = this.props
+    this.props.onOpenNewColumnModal()
-    if (emailConfirmationResends % 2 === 0 && emailConfirmationResends > 0) {
-      this.props.onOpenEmailModal()
-    }
-    this.props.onResendUserConfirmationEmail()
   }
 
   setAvatarNode = (c) => {
@@ -60,45 +43,12 @@ class DeckSidebar extends ImmutablePureComponent {
   }
 
   render() {
-    const {
+    const { account, logoDisabled } = this.props
-      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={[_s.d, _s.z4, _s.w76PX, _s.w100PC].join(' ')}>
 
-        <div className={innerNavigationContainerClasses}>
+        <div className={[_s.d, _s.w76PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.bottom0, _s.left0, _s.borderRight1PX, _s.borderColorSecondary, _s.posFixed].join(' ')}>
 
           <div className={[_s.d, _s.flexRow, _s.w76PX, _s.h100PC].join(' ')}>
 
@@ -128,7 +78,7 @@ class DeckSidebar extends ImmutablePureComponent {
 
                 <Divider isSmall />
 
-                <NavigationBarButton title='&nbsp;' icon='add' />
+                <NavigationBarButton title='&nbsp;' icon='add' onClick={this.handleOnOpenNewColumnModel} />
               </div>
 
               <div className={[_s.d, _s.mtAuto, _s.aiCenter].join(' ')}>
@@ -159,25 +109,19 @@ class DeckSidebar extends ImmutablePureComponent {
 
 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',
+      position: 'right-start',
     }))
   },
-  onOpenEmailModal() {
+  onOpenNewColumnModal() {
-    dispatch(openModal(MODAL_EMAIL_CONFIRMATION_REMINDER))
+    dispatch(openModal(MODAL_DECK_COLUMN_ADD))
-  },
-  onResendUserConfirmationEmail() {
-    dispatch(resendUserConfirmationEmail())
   },
   onChange(key, value) {
     dispatch(changeSetting(['displayOptions', key], value))
@@ -187,17 +131,8 @@ const mapDispatchToProps = (dispatch) => ({
 
 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,
+  onOpenNewColumnModal: PropTypes.func.isRequired,
-  onResendUserConfirmationEmail: PropTypes.func.isRequired,
-  emailConfirmationResends: PropTypes.number.isRequired,
-  noActions: PropTypes.bool,
   theme: PropTypes.string,
   logoDisabled: PropTypes.bool,
 }

app/javascript/gabsocial/components/status.js

@@ -309,7 +309,7 @@ class Status extends ImmutablePureComponent {
       isComposeModalOpen,
       commentSortingType,
       onOpenProModal,
-      isCompact,
+      isDeckConnected,
     } = this.props
     // const { height } = this.state
 
@@ -362,7 +362,7 @@ class Status extends ImmutablePureComponent {
     }
 
     const parentClasses = CX({
-      pb15: !isChild && !isCompact,
+      pb15: !isChild && !isDeckConnected,
     })
 
     const containerClasses = CX({
@@ -438,7 +438,7 @@ class Status extends ImmutablePureComponent {
                   <StatusHeader
                     status={status}
                     reduced={isChild}
-                    isCompact={isCompact}
+                    isCompact={isDeckConnected}
                   />
 
                   <div className={_s.d}>
@@ -453,7 +453,7 @@ class Status extends ImmutablePureComponent {
                   </div>
 
                   <StatusMedia
-                    isChild={isChild || isCompact}
+                    isChild={isChild || isDeckConnected}
                     isComposeModalOpen={isComposeModalOpen}
                     status={status}
                     onOpenMedia={this.props.onOpenMedia}
@@ -492,12 +492,12 @@ class Status extends ImmutablePureComponent {
                       onOpenLikes={this.props.onOpenLikes}
                       onOpenReposts={this.props.onOpenReposts}
                       onQuote={this.handleOnQuote}
-                      isCompact={isCompact}
+                      isCompact={isDeckConnected}
                     />
                   }
 
                   {
-                    !isChild && !!me && !isCompact &&
+                    !isChild && !!me && !isDeckConnected &&
                     <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/timeline_injections/timeline_injection_layout.js

@@ -40,7 +40,7 @@ class TimelineInjectionLayout extends React.PureComponent {
       buttonHref,
       buttonTitle,
       isXS,
-      isCompact,
+      isDeckConnected,
     } = this.props
     const { dismissed } = this.state
 
@@ -53,7 +53,7 @@ class TimelineInjectionLayout extends React.PureComponent {
       borderTop1PX: isXS,
       borderBottom1PX: isXS,
       border1PX: !isXS,
-      radiusSmall: !isXS && !isCompact,
+      radiusSmall: !isXS && !isDeckConnected,
       borderColorSecondary: 1,
       bgPrimary: 1,
       overflowHidden: 1,
@@ -106,9 +106,8 @@ class TimelineInjectionLayout extends React.PureComponent {
 
 }
 
-
 const mapStateToProps = (state) => ({
-  isCompact: state.getIn(['settings', 'isCompact']),
+  isDeckConnected: state.getIn(['deck', 'connected'], false),
 })
 
 TimelineInjectionLayout.propTypes = {
@@ -119,6 +118,7 @@ TimelineInjectionLayout.propTypes = {
   id: PropTypes.string.isRequired,
   subtitle: PropTypes.string,
   isXS: PropTypes.bool,
+  isDeckConnected: PropTypes.bool,
 }
 
 export default connect(mapStateToProps)(TimelineInjectionLayout)

app/javascript/gabsocial/constants.js

@@ -52,6 +52,7 @@ export const MODAL_CHAT_CONVERSATION_DELETE = 'CHAT_CONVERSATION_DELETE'
 export const MODAL_COMMUNITY_TIMELINE_SETTINGS = 'COMMUNITY_TIMELINE_SETTINGS'
 export const MODAL_COMPOSE = 'COMPOSE'
 export const MODAL_CONFIRM = 'CONFIRM'
+export const MODAL_DECK_COLUMN_ADD = 'DECK_COLUMN_ADD'
 export const MODAL_DISPLAY_OPTIONS = 'DISPLAY_OPTIONS'
 export const MODAL_EDIT_PROFILE = 'EDIT_PROFILE'
 export const MODAL_EDIT_SHORTCUTS = 'EDIT_SHORTCUTS'

app/javascript/gabsocial/containers/notification_container.js

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

app/javascript/gabsocial/containers/status_container.js

@@ -183,12 +183,12 @@ const makeMapStateToProps = () => {
       isComment,
       commentSortingType,
       isComposeModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
-      isCompact: state.getIn(['settings', 'isCompact']),
+      isDeckConnected: state.getIn(['deck', 'connected'], false),
     }
   }
 
   return mapStateToProps
-};
+}
 
 const mapDispatchToProps = (dispatch) => ({
   onReply (status, router, showModal) {

app/javascript/gabsocial/features/deck.js

@@ -1,10 +1,17 @@
 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 {
+  deckConnect,
+  deckDisconnect,
+} from '../actions/deck'
 import WrappedBundle from './ui/util/wrapped_bundle'
 import DeckColumn from '../components/deck_column'
 import {
   AccountTimeline,
+  Compose,
   HomeTimeline,
   Notifications,
   HashtagTimeline,
@@ -17,19 +24,33 @@ class Deck extends React.PureComponent {
   }
 
   componentDidMount () {
-    // this.props.connectDeck()
+    this.props.connectDeck()
   }
 
   componentWillUnmount() {
-    // this.props.disconnectDeck()
+    this.props.disconnectDeck()
+  }
+
+  componentDidMount () {
+    this.props.dispatch(deckConnect())
+  }
+
+  componentWillUnmount() {
+    this.props.dispatch(deckDisconnect())
   }
 
   render () {
-    const { account, children } = this.props
+    const { gabDeckOrder } = this.props
+
+    console.log("gabDeckOrder:", gabDeckOrder)
 
     return (
       <div className={[_s.d, _s.flexRow].join(' ')}>
-        <DeckColumn title='Home' icon='home'>
+        <DeckColumn title='Compose' icon='pencil'>
+          <WrappedBundle component={Compose} />
+        </DeckColumn>
+        <DeckColumn />
+        {/*<DeckColumn title='Home' icon='home'>
           <WrappedBundle component={HomeTimeline} />
         </DeckColumn>
         <DeckColumn title='Notifications' icon='notifications'>
@@ -41,6 +62,7 @@ class Deck extends React.PureComponent {
         <DeckColumn title='Jonny' icon='group' subtitle='@admin'>
           <WrappedBundle component={AccountTimeline} componentParams={{ account }} />
         </DeckColumn>
+        </DeckColumn>*/}
       </div>
     )
   }
@@ -48,15 +70,11 @@ class Deck extends React.PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  account: state.getIn(['accounts', '1']),
+  gabDeckOrder: state.getIn(['settings', 'gabDeckOrder']),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  
 })
 
 Deck.propTypes = {
-  // 
+  gabDeckOrder: ImmutablePropTypes.list,
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Deck)
+export default connect(mapStateToProps)(Deck)

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

@@ -24,6 +24,7 @@ export function ComposeModal() { return import(/* webpackChunkName: "components/
 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 DeckColumnAddModal() { return import(/* webpackChunkName: "components/deck_column_add_modal" */'../../../components/modal/deck_column_add_modal') }
 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/reducers/deck.js

@@ -0,0 +1,20 @@
+import {
+  DECK_CONNECT,
+  DECK_DISCONNECT,
+} from '../actions/deck'
+import { Map as ImmutableMap } from 'immutable'
+
+const initialState = ImmutableMap({
+  connected: false,
+})
+
+export default function deck(state = initialState, action) {
+  switch(action.type) {
+  case DECK_CONNECT:
+    return state.set('connected', true)
+  case DECK_DISCONNECT:
+    return state.set('connected', false)
+  default:
+    return state;
+  }
+}

app/javascript/gabsocial/reducers/index.js

@@ -10,6 +10,7 @@ import chat_messages from './chat_messages'
 import compose from './compose'
 import contexts from './contexts'
 import custom_emojis from './custom_emojis'
+import deck from './deck'
 import filters from './filters'
 import groups from './groups'
 import group_categories from './group_categories'
@@ -59,6 +60,7 @@ const reducers = {
   compose,
   contexts,
   custom_emojis,
+  deck,
   filters,
   groups,
   group_categories,

app/javascript/styles/global.css

@@ -317,6 +317,7 @@ pre {
 .flexShrink1 { flex-shrink: 1; }
 
 .flexRow { flex-direction: row; }
+.flexColumn { flex-direction: column; }
 .flexRowReverse { flex-direction: row-reverse; }
 .flexWrap { flex-wrap: wrap; }
 .flexColumnReverse { flex-direction: column-reverse; }