Progress

app/javascript/gabsocial/pages/home_page.js

@@ -3,21 +3,37 @@ import GroupSidebarPanel from '../components/panel/groups_panel'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import ProgressPanel from '../components/panel/progress_panel'
-import UserPanel from '../components/user_panel'
+import UserPanel from '../components/panel/user_panel'
+import TrendsPanel from '../components/panel/trends_panel'
+import HashtagsPanel from '../components/panel/hashtags_panel'
 import DefaultLayout from '../components/layouts/default_layout'
 import TimelineComposeBlock from '../components/timeline_compose_block'
+import Divider from '../components/divider'
 
 export default class HomePage extends PureComponent {
+
+  handleEditHomeTimeline () {
+    console.log("handleEditHomeTimeline")
+  }
+
   render() {
     const { children } = this.props
 
     return (
       <DefaultLayout
         title='Home'
+        actions={[
+          {
+            icon: 'ellipsis',
+            onClick: this.handleEditHomeTimeline
+          },
+        ]}
         layout={(
           <Fragment>
             <UserPanel />
             <ProgressPanel />
+            <TrendsPanel />
+            <HashtagsPanel />
             <WhoToFollowPanel />
             <GroupSidebarPanel />
             <LinkFooter />
@@ -25,7 +41,7 @@ export default class HomePage extends PureComponent {
         )}
       >
         <TimelineComposeBlock autoFocus={false} shouldCondense />
-        <div className={[styles.default, styles.borderBottom1PX, styles.borderColorSubtle2, styles.marginBottom15PX, styles.width100PC].join(' ')} />
+        <Divider />
         {children}
       </DefaultLayout>
     )

app/javascript/gabsocial/pages/list_page.js

@@ -0,0 +1,49 @@
+import { Fragment } from 'react'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import LinkFooter from '../components/link_footer'
+import DefaultLayout from '../components/layouts/default_layout'
+import ListDetailsPanel from '../components/panel/list_details_panel'
+
+const mapStateToProps = (state, props) => ({
+  list: state.getIn(['lists', props.params.id]),
+});
+
+export default @connect(mapStateToProps)
+class ListPage extends ImmutablePureComponent {
+
+  static propTypes = {
+    list: ImmutablePropTypes.map,
+  };
+
+  handleEditListTimeline () {
+    console.log("handleEditListTimeline")
+  }
+
+  render() {
+    const { children, list } = this.props
+
+    const title = list ? list.get('title') : ''
+
+    return (
+      <DefaultLayout
+        title={title}
+        actions={[
+          {
+            icon: 'ellipsis',
+            onClick: this.handleEditListTimeline
+          },
+        ]}
+        layout={(
+          <Fragment>
+            <ListDetailsPanel />
+            <LinkFooter />
+          </Fragment>
+        )}
+        showBackBtn
+      >
+        { children }
+      </DefaultLayout>
+    )
+  }
+}

app/javascript/gabsocial/pages/lists_page.js

@@ -0,0 +1,46 @@
+import { Fragment } from 'react'
+import LinkFooter from '../components/link_footer'
+import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
+import TrendsPanel from '../components/panel/trends_panel'
+import DefaultLayout from '../components/layouts/default_layout'
+
+export default class ListsPage extends PureComponent {
+
+  handleClickNewList () {
+    console.log("handleClickNewList")
+  }
+
+  handleClickEditLists () {
+    console.log("handleClickEditLists")
+  }
+
+  render() {
+    const { children } = this.props
+
+    return (
+      <DefaultLayout
+        title='Lists'
+        actions={[
+          {
+            icon: 'subtract',
+            onClick: this.handleClickEditLists
+          },
+          {
+            icon: 'add',
+            onClick: this.handleClickNewList
+          },
+        ]}
+        layout={(
+          <Fragment>
+            <TrendsPanel />
+            <WhoToFollowPanel />
+            <LinkFooter />
+          </Fragment>
+        )}
+        showBackBtn
+      >
+        {children}
+      </DefaultLayout>
+    )
+  }
+}