Extract conversation and create conversation page.

src/components/conversation-page/conversation-page.js

+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

src/components/conversation-page/conversation-page.vue

+<template>
+  <conversation :collapsable="false" :statusoid="statusoid"></conversation>
+</template>
+
+<script src="./conversation-page.js"></script>

src/components/conversation/conversation.js

-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

src/components/conversation/conversation.vue

 <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>

src/main.js

@@ -5,7 +5,7 @@ import App from './App.vue'
 import PublicTimeline from './components/public_timeline/public_timeline.vue'
 import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
 import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
-import Conversation from './components/conversation/conversation.vue'
+import ConversationPage from './components/conversation-page/conversation-page.vue'
 import Mentions from './components/mentions/mentions.vue'
 import UserProfile from './components/user_profile/user_profile.vue'
 
@@ -39,7 +39,7 @@ const routes = [
   { path: '/main/all', component: PublicAndExternalTimeline },
   { path: '/main/public', component: PublicTimeline },
   { path: '/main/friends', component: FriendsTimeline },
-  { name: 'conversation', path: '/notice/:id', component: Conversation },
+  { name: 'conversation', path: '/notice/:id', component: ConversationPage },
   { name: 'user-profile', path: '/users/:id', component: UserProfile },
   { name: 'mentions', path: '/:username/mentions', component: Mentions }
 ]