timeline visiblity stuff etc etc

src/components/social_timeline/social_timeline.js

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

src/components/social_timeline/social_timeline.vue

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

src/components/timeline_menu/timeline_menu.js

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

src/components/timeline_menu_tabs/timeline_menu_content.vue

@@ -32,6 +32,22 @@
         >{{ $t("nav.bubble_timeline") }}</span>
       </router-link>
     </li>
+    <li v-if="bubbleTimelineVisible">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'social-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          :icon="['far', 'circle']"
+        />
+        <span
+          :title="$t('nav.bubble_timeline_description')"
+          :aria-label="$t('nav.bubble_timeline_description')"
+        >{{ $t("nav.social_timeline") }}</span>
+      </router-link>
+    </li>
     <li v-if="publicTimelineVisible">
       <router-link
         class="menu-item"

src/components/timeline_menu_tabs/timeline_menu_tabs.vue

@@ -39,6 +39,18 @@
         :title="$t('nav.bubble_timeline_description')"
       />
     </router-link>
+    <router-link
+      v-if="bubbleTimelineVisible"
+      :to="{ name: 'social-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        :icon="['far', 'circle']"
+        :title="$t('nav.bubble_timeline_description')"
+      />
+    </router-link>
     <router-link
       v-if="federatedTimelineVisible"
       :to="{ name: 'public-external-timeline' }"