timeline panel nav (#131)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/131

src/components/desktop_nav/desktop_nav.vue

@@ -54,17 +54,6 @@
               :title="$t('nav.public_tl')"
             />
           </router-link>
-          <router-link
-            :to="{ name: 'public-external-timeline' }"
-            class="nav-icon"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding"
-              icon="globe"
-              :title="$t('nav.twkn')"
-            />
-          </router-link>
           <router-link
             v-if="currentUser"
             :to="{ name: 'bubble-timeline' }"
@@ -77,6 +66,17 @@
               :title="$t('nav.bubble_timeline')"
             />
           </router-link>
+          <router-link
+            :to="{ name: 'public-external-timeline' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="globe"
+              :title="$t('nav.twkn')"
+            />
+          </router-link>
         </div>
       </div>
       <router-link
@@ -105,6 +105,7 @@
         >
           <router-link
             class="nav-icon"
+            v-if="currentUser"
             :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
           >
             <FAIcon

src/components/moderation_tools/moderation_tools.vue

@@ -13,13 +13,13 @@
           <span v-if="user.is_local">
             <button
               class="button-default dropdown-item"
-              @click="toggleRight(&quot;admin&quot;)"
+              @click="toggleRight('admin')"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
               class="button-default dropdown-item"
-              @click="toggleRight(&quot;moderator&quot;)"
+              @click="toggleRight('moderator')"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
             </button>
@@ -167,6 +167,7 @@
 
 .moderation-tools-popover {
   height: 100%;
+  z-index: 999;
   .trigger {
     display: flex !important;
     height: 100%;

src/components/settings_modal/tabs/general_tab.vue

@@ -49,6 +49,14 @@
             {{ $t('settings.show_nav_shortcuts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="showPanelNavShortcuts"
+            expert="1"
+          >
+            {{ $t('settings.show_panel_nav_shortcuts') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="showWiderShortcuts"

src/components/timeline/timeline.js

@@ -2,6 +2,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 TimelineMenuTabs from '../timeline_menu_tabs/timeline_menu_tabs.vue'
 import TimelineQuickSettings from './timeline_quick_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -39,6 +40,7 @@ const Timeline = {
     Status,
     Conversation,
     TimelineMenu,
+    TimelineMenuTabs,
     TimelineQuickSettings
   },
   computed: {
@@ -85,6 +87,9 @@ const Timeline = {
     },
     virtualScrollingEnabled () {
       return this.$store.getters.mergedConfig.virtualScrolling
+    },
+    showPanelNavShortcuts () {
+      return this.$store.getters.mergedConfig.showPanelNavShortcuts
     }
   },
   created () {

src/components/timeline/timeline.vue

@@ -1,7 +1,11 @@
 <template>
   <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
-      <TimelineMenu v-if="!embedded" />
+      <template v-if="!embedded">
+        <TimelineMenuTabs v-if="showPanelNavShortcuts" />
+        <TimelineMenu v-else />
+      </template>
+
       <button
         v-if="showLoadButton"
         class="button-default loadmore-button"

src/components/timeline_menu_tabs/timeline_menu_content.js

@@ -0,0 +1,30 @@
+import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome
+} from '@fortawesome/free-solid-svg-icons'
+import { faCircle } from '@fortawesome/free-regular-svg-icons'
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faCircle
+)
+
+const TimelineMenuContent = {
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    })
+  }
+}
+
+export default TimelineMenuContent

src/components/timeline_menu_tabs/timeline_menu_content.vue

@@ -0,0 +1,114 @@
+<template>
+  <ul>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'friends' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="home"
+        />
+        <span
+          :title="$t('nav.home_timeline_description')"
+          :aria-label="$t('nav.home_timeline_description')"
+        >{{ $t("nav.home_timeline") }}</span>
+      </router-link>
+    </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="['far', 'circle']"
+        />
+        <span
+          :title="$t('nav.bubble_timeline_description')"
+          :aria-label="$t('nav.bubble_timeline_description')"
+        >{{ $t("nav.bubble_timeline") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser || !privateMode">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="users"
+        />
+        <span
+          :title="$t('nav.public_timeline_description')"
+          :aria-label="$t('nav.public_timeline_description')"
+        >{{ $t("nav.public_tl") }}</span>
+      </router-link>
+    </li>
+    <li v-if="federating && (currentUser || !privateMode)">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-external-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="globe"
+        />
+        <span
+          :title="$t('nav.twkn_timeline_description')"
+          :aria-label="$t('nav.twkn_timeline_description')"
+        >{{ $t("nav.twkn") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bookmarks'}"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="bookmark"
+        />
+        <span
+          :title="$t('nav.bookmarks')"
+          :aria-label="$t('nav.bookmarks')"
+        >{{ $t("nav.bookmarks") }}</span>
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="envelope"
+        />
+        <span
+          :title="$t('nav.dms')"
+          :aria-label="$t('nav.dms')"
+        >{{ $t("nav.dms") }}</span>
+      </router-link>
+    </li>
+  </ul>
+</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>

src/components/timeline_menu_tabs/timeline_menu_tabs.js

@@ -0,0 +1,61 @@
+import Popover from '../popover/popover.vue'
+import TimelineMenuContent from './timeline_menu_content.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(faChevronDown)
+
+// Route -> i18n key mapping, exported and not in the computed
+// because nav panel benefits from the same information.
+export const timelineNames = () => {
+  return {
+    'friends': 'nav.home_timeline',
+    'bookmarks': 'nav.bookmarks',
+    'dms': 'nav.dms',
+    'public-timeline': 'nav.public_tl',
+    'public-external-timeline': 'nav.twkn',
+    'bubble-timeline': 'nav.bubble_timeline'
+  }
+}
+
+const TimelineMenuTabs = {
+  components: {
+    Popover,
+    TimelineMenuContent
+  },
+  data () {
+    return {
+      isOpen: false
+    }
+  },
+  created () {
+    if (timelineNames()[this.$route.name]) {
+      this.$store.dispatch('setLastTimeline', this.$route.name)
+    }
+  },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    privateMode () {
+      return this.$store.state.instance.private
+    }
+  },
+  methods: {
+    timelineName () {
+      const route = this.$route.name
+      if (route === 'tag-timeline') {
+        return '#' + this.$route.params.tag
+      }
+      if (route === 'list-timeline') {
+        return this.$store.getters.findListTitle(this.$route.params.id)
+      }
+      const i18nkey = timelineNames()[this.$route.name]
+      return i18nkey ? this.$t(i18nkey) : route
+    }
+  }
+}
+
+export default TimelineMenuTabs

src/components/timeline_menu_tabs/timeline_menu_tabs.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    v-if="currentUser || !privateMode"
+    class="nav-items timeline-menu-tabs"
+  >
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'friends' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="home"
+        :title="$t('nav.home_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      :to="{ name: 'public-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="users"
+        :title="$t('nav.public_timeline_description')"
+      />
+    </router-link>
+    <router-link
+      v-if="currentUser"
+      :to="{ name: 'bubble-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
+      :to="{ name: 'public-external-timeline' }"
+      class="nav-icon"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="globe"
+        :title="$t('nav.twkn_timeline_description')"
+      />
+    </router-link>
+    <span class="timeline-title">{{ timelineName() }}</span>
+  </div>
+</template>
+
+<script src="./timeline_menu_tabs.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.timeline-menu-tabs {
+  .nav-icon {
+    margin-left: 0.7em;
+    width: 2em;
+    height: 100%;
+    text-align: center;
+
+    &.router-link-active {
+      border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
+      padding-bottom: 0.8em;
+
+      .svg-inline--fa {
+        font-weight: bolder;
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+        --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      }
+    }
+  }
+
+  .timeline-title {
+    margin-left: 1em;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: var(--selectedMenuText, $fallback--text);
+    color: var(--selectedMenuText, $fallback--text);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
+
+  @media all and (max-width: 900px) {
+    .timeline-title {
+      display: none;
+    }
+  }
+}
+</style>

src/components/user_card/user_card.js

@@ -69,6 +69,7 @@ export default {
       return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
     },
     loggedIn () {
+      console.log({ ...this.$store.state.users.currentUser })
       return this.$store.state.users.currentUser
     },
     dailyAvg () {

src/components/user_card/user_card.vue

@@ -245,7 +245,7 @@
             </button>
           </div>
           <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot;"
+            v-if="loggedIn.role === 'admin'"
             :user="user"
           />
         </div>

src/i18n/en.json

@@ -616,6 +616,7 @@
         "show_admin_badge": "Show \"Admin\" badge in my profile",
         "show_moderator_badge": "Show \"Moderator\" badge in my profile",
         "show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
+        "show_panel_nav_shortcuts": "Show timeline navigation shortcuts at the top of the panel",
         "show_scrollbars": "Show side column's scrollbars",
         "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
         "show_yous": "Show (You)s",

src/modules/config.js

@@ -37,6 +37,7 @@ export const defaultState = {
   collapseMessageWithSubject: undefined, // instance default
   padEmoji: true,
   showNavShortcuts: undefined, // instance default
+  showPanelNavShortcuts: undefined, // instance default
   showWiderShortcuts: undefined, // instance default
   hideSiteFavicon: undefined, // instance default
   hideSiteName: undefined, // instance default