From 961099d34a3852d1019a00d390ad638fe45118e4 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 2 Jul 2020 18:03:02 +0300
Subject: [PATCH] basic version done, needs cleanup from nav panel styles

---
 src/components/nav_panel/nav_panel.vue        | 20 ++----
 src/components/timeline/timeline.js           | 10 +--
 src/components/timeline/timeline.vue          |  4 +-
 src/components/timeline_menu/timeline_menu.js | 30 +++++++++
 .../timeline_menu/timeline_menu.vue           | 62 +++++++++++++++++++
 5 files changed, 104 insertions(+), 22 deletions(-)
 create mode 100644 src/components/timeline_menu/timeline_menu.js
 create mode 100644 src/components/timeline_menu/timeline_menu.vue

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 8cd04dc7..ed70f019 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -7,14 +7,14 @@
             <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if="currentUser">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
+        <li v-else-if="!privateMode">
+          <router-link :to="{ name: 'public-timeline' }">
+            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li v-if="currentUser">
-          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
+          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
@@ -28,16 +28,6 @@
             </span>
           </router-link>
         </li>
-        <li v-if="currentUser || !privateMode">
-          <router-link :to="{ name: 'public-timeline' }">
-            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
-          </router-link>
-        </li>
-        <li v-if="federating && (currentUser || !privateMode)">
-          <router-link :to="{ name: 'public-external-timeline' }">
-            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
-          </router-link>
-        </li>
         <li>
           <router-link :to="{ name: 'about' }">
             <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index d6519f4a..3a7a4268 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,6 +1,7 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
+import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 import { throttle, keyBy } from 'lodash'
 
 export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
@@ -35,6 +36,11 @@ const Timeline = {
       bottomedOut: false
     }
   },
+  components: {
+    Status,
+    Conversation,
+    TimelineMenu
+  },
   computed: {
     timelineError () {
       return this.$store.state.statuses.error
@@ -74,10 +80,6 @@ const Timeline = {
       return keyBy(this.pinnedStatusIds)
     }
   },
-  components: {
-    Status,
-    Conversation
-  },
   created () {
     const store = this.$store
     const credentials = store.state.users.currentUser.credentials
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 111c0976..f8baaf19 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,9 +1,7 @@
 <template>
   <div :class="classes.root">
     <div :class="classes.header">
-      <div class="title">
-        {{ title }}
-      </div>
+      <TimelineMenu />
       <div
         v-if="timelineError"
         class="loadmore-error alert error"
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
new file mode 100644
index 00000000..912dd79a
--- /dev/null
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -0,0 +1,30 @@
+import Popover from '../popover/popover.vue'
+import { mapState } from 'vuex'
+
+const TimelineMenu = {
+  components: {
+    Popover
+  },
+  created () {
+    if (this.currentUser && this.currentUser.locked) {
+      this.$store.dispatch('startFetchingFollowRequests')
+    }
+  },
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    }),
+    timelineNamesForRoute () {
+      return {
+        'friends': this.$t('nav.timeline'),
+        'dms': this.$t('nav.dms'),
+        'public-timeline': this.$t('nav.public_tl'),
+        'public-external-timeline': this.$t('nav.twkn')
+      }
+    }
+  }
+}
+
+export default TimelineMenu
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
new file mode 100644
index 00000000..dfdf7180
--- /dev/null
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -0,0 +1,62 @@
+<template>
+  <Popover
+    trigger="click"
+    class="timeline-menu"
+    popover-class="nav-panel timeline-menu-popover"
+  >
+    <div slot="content">
+      <ul>
+        <li v-if="currentUser">
+          <router-link :to="{ name: 'friends' }">
+            <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser">
+          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
+            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser || !privateMode">
+          <router-link :to="{ name: 'public-timeline' }">
+            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
+          </router-link>
+        </li>
+        <li v-if="federating && (currentUser || !privateMode)">
+          <router-link :to="{ name: 'public-external-timeline' }">
+            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+    <div
+      slot="trigger"
+      class="title timeline-menu-title"
+    >
+      {{ timelineNamesForRoute[$route.name] }}
+      <i class="icon-down-open" />
+    </div>
+  </Popover>
+</template>
+
+<script src="./timeline_menu.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.timeline-menu {
+  flex-grow: 1;
+  .timeline-menu-popover {
+    width: 20rem;
+    font-size: 1rem;
+    margin-left: -0.6em;
+    margin-top: 0.6em;
+  }
+
+  .timeline-menu-title {
+    flex-grow: 0;
+    width: 20rem;
+    margin: 0;
+  }
+}
+
+</style>