8 files changed, 92 insertions, 6 deletions
diff --git a/src/components/friends_timeline/friends_timeline.js b/src/components/friends_timeline/friends_timeline.js
new file mode 100644
index 00000000..948b23a4
--- /dev/null
+++ b/src/components/friends_timeline/friends_timeline.js
@@ -0,0 +1,11 @@
+import Timeline from '../timeline/timeline.vue'
+const FriendsTimeline = {
+  components: {
+    Timeline
+  },
+  computed: {
+    timeline () { return this.$store.state.statuses.timelines.friends }
+  }
+}
+
+export default FriendsTimeline
diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
new file mode 100644
index 00000000..03e518c6
--- /dev/null
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading">Friends Timeline</div>
+    <div class="panel-body">
+      <Timeline v-bind:timeline="timeline" />
+    </div>
+  </div>
+</template>
+
+<script src="./friends_timeline.js"></script>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 0ed8baf8..4aab0943 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel panel-default">
+  <div class="timeline panel panel-default">
     <div class="panel-heading">Public Timeline</div>
     <div class="panel-body">
       <Timeline v-bind:timeline="timeline" />
diff --git a/src/components/status/status.js b/src/components/status/status.js
new file mode 100644
index 00000000..ad08d9b7
--- /dev/null
+++ b/src/components/status/status.js
@@ -0,0 +1,6 @@
+const Status = {
+  props: [ 'status' ]
+}
+
+export default Status
+
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
new file mode 100644
index 00000000..6ced1af5
--- /dev/null
+++ b/src/components/status/status.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="status-el">
+    <div ng-if="retweet" class="media container retweet-info">
+      <div class="media-left">
+        <i class='fa fa-retweet'></i>
+      </div>
+      <div class="media-body">
+        Retweeted by {{status.user.screen_name}}
+      </div>
+    </div>
+    <div class="media status container" ng-class="{compact: compact, notify: notify}">
+      <div class="media-left">
+        <a href="#">
+          <img class='avatar' :src="status.user.profile_image_url_original">
+        </a>
+      </div>
+      <div class="media-body">
+        <h4 ng-if="!compact" class="media-heading">
+          <strong>{{status.user.name}}</strong>
+          <small>{{status.user.screen_name}}</small>
+          <small ng-if="status.in_reply_to_screen_name"> &gt; {{status.in_reply_to_screen_name}}</small>
+          -
+          <small ng-click="goToConversation(status.statusnet_conversation_id)">{{status.created_at_parsed | date:'medium'}}</small>
+        </h4>
+
+        <p>{{status.text}}</p>
+
+        <div ng-if='status.attachments' class='attachments'>
+          <attachment nsfw="nsfw" attachment="attachment" ng-repeat="attachment in status.attachments">
+          </attachment>
+        </div>
+
+        <div ng-if="!compact">
+          <p>
+          </p>
+          <div class='status-actions'>
+            <div ng-click="toggleReplying()">
+              <i class='fa fa-reply'></i>
+            </div>
+            <div>
+              <i class='fa fa-retweet'></i>
+            </div>
+            <favorite-button status=status></favorite-button>
+          </div>
+
+          <!-- <post-status-form ng-if="replying" toggle="toggleReplying" reply-to-status="status" reply-to="{{status.id}}"></post-status-form> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./status.js" ></script>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 727008ad..fd36d0db 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,7 +1,12 @@
+import Status from '../status/status.vue'
+
 const Timeline = {
   props: [
     'timeline'
-  ]
+  ],
+  components: {
+    Status
+  }
 }
 
-export default Timeline;
+export default Timeline
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index cf712796..562656f6 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="timeline">
-    <h1>Timeline goes here</h1>
-    <h2 v-for="status in timeline.visibleStatuses">{{status.text}}</h2>
+    <status v-for="status in timeline.visibleStatuses" v-bind:status="status"></status>
   </div>
 </template>
 <script src="./timeline.js"></script>
diff --git a/src/main.js b/src/main.js
index f5252481..6ce2ca1b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 import App from './App.vue'
 import PublicTimeline from './components/public_timeline/public_timeline.vue'
+import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
 
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
@@ -19,7 +20,8 @@ const store = new Vuex.Store({
 
 const routes = [
   { path: '/', redirect: '/main/public' },
-  { path: '/main/public', component: PublicTimeline }
+  { path: '/main/public', component: PublicTimeline },
+  { path: '/main/friends', component: FriendsTimeline }
 ]
 
 const router = new VueRouter({routes})