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,20 +1,25 @@
 <template>
-  <div class="timeline">
-    <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
-      <div class="base01-background base05-border new-status-notification">
-        <p class="text-center" >
-          {{timeline.newStatusCount}} new statuses
-        </p>
+  <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">
+            <p class="text-center" >
+              {{timeline.newStatusCount}} new statuses
+            </p>
+          </div>
+        </a>
+        <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" >
+              Load older statuses.
+            </p>
+          </div>
+        </a>
       </div>
-    </a>
-    <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" >
-          Load older statuses.
-        </p>
-      </div>
-    </a>
+    </div>
   </div>
 </template>
 <script src="./timeline.js"></script>