add bubble timeline

src/components/bubble_timeline/bubble_timeline.js

@@ -0,0 +1,18 @@
+import Timeline from '../timeline/timeline.vue'
+const PublicTimeline = {
+  components: {
+    Timeline
+  },
+  computed: {
+    timeline () { return this.$store.state.statuses.timelines.bubble }
+  },
+  created () {
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'bubble' })
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'bubble')
+  }
+
+}
+
+export default PublicTimeline

src/components/bubble_timeline/bubble_timeline.vue

@@ -0,0 +1,9 @@
+<template>
+  <Timeline
+    :title="$t('nav.bubble_timeline')"
+    :timeline="timeline"
+    :timeline-name="'bubble'"
+  />
+</template>
+
+<script src="./bubble_timeline.js"></script>

src/components/timeline_menu/timeline_menu.js

@@ -15,7 +15,8 @@ export const timelineNames = () => {
     'bookmarks': 'nav.bookmarks',
     'dms': 'nav.dms',
     'public-timeline': 'nav.public_tl',
-    'public-external-timeline': 'nav.twkn'
+    'public-external-timeline': 'nav.twkn',
+    'bubble-timeline': 'nav.bubble_timeline'
   }
 }
 

src/components/timeline_menu/timeline_menu.vue

@@ -135,6 +135,7 @@
   a {
     display: block;
     padding: 0.6em 0.65em;
+    padding-bottom: 0;
 
     &:hover {
       background-color: $fallback--lightBg;

src/components/timeline_menu/timeline_menu_content.js

@@ -5,7 +5,8 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome
+  faHome,
+  faCircle
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -13,7 +14,8 @@ library.add(
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome
+  faHome,
+  faCircle
 )
 
 const TimelineMenuContent = {

src/components/timeline_menu/timeline_menu_content.vue

@@ -11,6 +11,20 @@
           icon="home"
         />{{ $t("nav.home_timeline") }}
       </router-link>
+      <span class="timeline-desc">{{ $t("nav.home_timeline_description") }}</span>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bubble-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="circle"
+        />{{ $t("nav.bubble_timeline") }}
+      </router-link>
+      <span class="timeline-desc">{{ $t("nav.bubble_timeline_description") }}</span>
     </li>
     <li v-if="currentUser || !privateMode">
       <router-link
@@ -23,6 +37,7 @@
           icon="users"
         />{{ $t("nav.public_tl") }}
       </router-link>
+      <span class="timeline-desc">{{ $t("nav.public_timeline_description") }}</span>
     </li>
     <li v-if="federating && (currentUser || !privateMode)">
       <router-link
@@ -35,6 +50,7 @@
           icon="globe"
         />{{ $t("nav.twkn") }}
       </router-link>
+      <span class="timeline-desc">{{ $t("nav.twkn_timeline_description") }}</span>
     </li>
     <li v-if="currentUser">
       <router-link
@@ -64,3 +80,15 @@
 </template>
 
 <script src="./timeline_menu_content.js" ></script>
+
+<style lang="scss">
+@import "../../_variables.scss";
+.timeline-desc {
+  text-decoration: none;
+  color: var(--text, $fallback--text);
+  padding-left: 1em;
+  display: block;
+  background-color: scale(var(--bg, $fallback--bg), 0.1);
+  padding-bottom: 0.4em;
+}
+</style>