Unify notice timelines to make changes easier.

src/components/friends_timeline/friends_timeline.vue

@@ -1,10 +1,5 @@
 <template>
-  <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'"/>
-    </div>
-  </div>
+  <Timeline :title="'Friends'" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
 </template>
 
 <script src="./friends_timeline.js"></script>

src/components/mentions/mentions.vue

@@ -1,10 +1,5 @@
 <template>
-  <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'"/>
-    </div>
-  </div>
+  <Timeline :title="'Mentions'" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
 </template>
 
 <script src="./mentions.js"></script>

src/components/public_and_external_timeline/public_and_external_timeline.vue

@@ -1,10 +1,5 @@
 <template>
-  <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'"/>
-    </div>
-  </div>
+  <Timeline :title="'THE WHOLE KNOWN NETWORK'"v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
 </template>
 
 <script src="./public_and_external_timeline.js"></script>

src/components/public_timeline/public_timeline.vue

@@ -1,10 +1,5 @@
 <template>
-  <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'"/>
-    </div>
-  </div>
+  <Timeline :title="'Public Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
 </template>
 
 <script src="./public_timeline.js"></script>

src/components/timeline/timeline.js

@@ -5,7 +5,8 @@ import StatusOrConversation from '../status_or_conversation/status_or_conversati
 const Timeline = {
   props: [
     'timeline',
-    'timelineName'
+    'timelineName',
+    'title'
   ],
   components: {
     Status,

src/components/timeline/timeline.vue

@@ -1,4 +1,7 @@
 <template>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading base01-background base04">{{title}}</div>
+    <div class="panel-body">
       <div class="timeline">
         <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
           <div class="base01-background base05-border new-status-notification">
@@ -16,6 +19,8 @@
           </div>
         </a>
       </div>
+    </div>
+  </div>
 </template>
 <script src="./timeline.js"></script>