15 files changed, 100 insertions, 26 deletions
diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js
new file mode 100644
index 00000000..beffa5bb
--- /dev/null
+++ b/src/components/conversation-page/conversation-page.js
@@ -0,0 +1,19 @@
+import Conversation from '../conversation/conversation.vue'
+import { find, toInteger } from 'lodash'
+
+const conversationPage = {
+  components: {
+    Conversation
+  },
+  computed: {
+    statusoid () {
+      const id = toInteger(this.$route.params.id)
+      const statuses = this.$store.state.statuses.allStatuses
+      const status = find(statuses, {id})
+
+      return status
+    }
+  }
+}
+
+export default conversationPage
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
new file mode 100644
index 00000000..b03eea28
--- /dev/null
+++ b/src/components/conversation-page/conversation-page.vue
@@ -0,0 +1,5 @@
+<template>
+  <conversation :collapsable="false" :statusoid="statusoid"></conversation>
+</template>
+
+<script src="./conversation-page.js"></script>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 5d4f5d04..ecc76e71 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { find, filter, sortBy, toInteger } from 'lodash'
+import { filter, sortBy } from 'lodash'
 import { statusType } from '../../modules/statuses.js'
 import Status from '../status/status.vue'
 
@@ -8,14 +8,12 @@ const sortAndFilterConversation = (conversation) => {
 }
 
 const conversation = {
+  props: [
+    'statusoid',
+    'collapsable'
+  ],
   computed: {
-    status () {
-      const id = toInteger(this.$route.params.id)
-      const statuses = this.$store.state.statuses.allStatuses
-      const status = find(statuses, {id})
-
-      return status
-    },
+    status () { return this.statusoid },
     conversation () {
       if (!this.status) {
         return false
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 00d3e062..9675e69f 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="timeline panel panel-default base00-background">
-    <div class="panel-heading base01-background base04">Status</div>
+    <div class="panel-heading base01-background base04">
+      Conversation
+      <div v-if="collapsable">
+        <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
+      </div>
+    </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
       </div>
     </div>
   </div>
diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
index 88c477ab..afe5cc89 100644
--- a/src/components/friends_timeline/friends_timeline.vue
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background">
+  <div class="timeline panel panel-default">
     <div class="panel-heading base01-background base04">Friends Timeline</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index cf97f9ee..59f00241 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background">
+  <div class="timeline panel panel-default">
     <div class="panel-heading base01-background base04">Mentions</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index ba5d8971..0846c27b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -9,15 +9,15 @@
           </a>
           <div class='text'>
             <div v-if="notification.type === 'favorite'">
-              <h1>{{ notification.action.user.name }}<i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
               <p>{{ notification.status.text }}</p>
             </div>
             <div v-if="notification.type === 'repeat'">
-              <h1>{{ notification.action.user.name }}<i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
               <p>{{ notification.status.text }}</p>
             </div>
             <div v-if="notification.type === 'mention'">
-              <h1>{{ notification.action.user.name }}<i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
               <p>{{ notification.status.text }}</p>
             </div>
           </div>
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
index 282bb15b..bda51153 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.vue
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background">
+  <div class="timeline panel panel-default">
     <div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index ada40005..d05695b2 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background">
+  <div class="timeline panel panel-default">
     <div class="panel-heading base01-background base04">Public Timeline</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 27911478..40589ea5 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -5,9 +5,13 @@ import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const Status = {
-  props: [ 'statusoid' ],
+  props: [
+    'statusoid',
+    'expandable'
+  ],
   data: () => ({
-    replying: false
+    replying: false,
+    expanded: false
   }),
   computed: {
     retweet () { return !!this.statusoid.retweeted_status },
@@ -33,6 +37,9 @@ const Status = {
   methods: {
     toggleReplying () {
       this.replying = !this.replying
+    },
+    toggleExpanded () {
+      this.$emit('toggleExpanded')
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e043f6e2..f113fb7e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" v-if="!status.deleted">
+  <div class="status-el base00-background" v-if="!status.deleted">
     <div v-if="retweet" class="media container retweet-info">
       <div class="media-left">
         <i class='fa icon-retweet retweeted'></i>
@@ -30,6 +30,12 @@
                 <timeago :since="status.created_at" :auto-update="60"></timeago>
               </router-link>
             </small>
+            <template v-if="expandable">
+              -
+              <small>
+                <a href="#" @click.prevent="toggleExpanded" >Expand</a>
+              </small>
+            </template>
             <small v-if="!status.is_local" class="source_url">
               <a :href="status.external_url" target="_blank" >Source</a>
             </small>
@@ -122,8 +128,4 @@
      padding-right: 1em;
      border-bottom: 1px solid;
  }
-
- .status-el:last-child .status {
-     border-bottom: none
- }
 </style>
diff --git a/src/components/status_or_conversation/status_or_conversation.js b/src/components/status_or_conversation/status_or_conversation.js
new file mode 100644
index 00000000..441552ca
--- /dev/null
+++ b/src/components/status_or_conversation/status_or_conversation.js
@@ -0,0 +1,22 @@
+import Status from '../status/status.vue'
+import Conversation from '../conversation/conversation.vue'
+
+const statusOrConversation = {
+  props: ['statusoid'],
+  data () {
+    return {
+      expanded: false
+    }
+  },
+  components: {
+    Status,
+    Conversation
+  },
+  methods: {
+    toggleExpanded () {
+      this.expanded = !this.expanded
+    }
+  }
+}
+
+export default statusOrConversation
diff --git a/src/components/status_or_conversation/status_or_conversation.vue b/src/components/status_or_conversation/status_or_conversation.vue
new file mode 100644
index 00000000..4fabfab2
--- /dev/null
+++ b/src/components/status_or_conversation/status_or_conversation.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation>
+    <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid"></status>
+  </div>
+</template>
+
+<script src="./status_or_conversation.js"></script>
+
+<style lang="scss">
+ .spacer {
+   height: 1em
+ }
+</style>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8799e69c..addd0255 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,5 +1,6 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
+import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
 
 const Timeline = {
   props: [
@@ -7,7 +8,8 @@ const Timeline = {
     'timelineName'
   ],
   components: {
-    Status
+    Status,
+    StatusOrConversation
   },
   created () {
     const store = this.$store
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 3da31f14..45886f6c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -7,7 +7,7 @@
         </p>
       </div>
     </a>
-    <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
+    <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
     <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
       <div class="base01-background base05-border new-status-notification">
         <p class="text-center" >