Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into develop

2021-03-23 23:01:44 +00:00 · 2021-03-23 23:01:44 +00:00 · c7c4e2e03e
commit c7c4e2e03e
parent d1bffd7659 aacd909846
40 changed files with 585 additions and 214 deletions
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@ -35,6 +35,18 @@ const chatPanel = {
    userProfileLink (user) {
      return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
    }
+  },
+  watch: {
+    messages (newVal) {
+      const scrollEl = this.$el.querySelector('.chat-window')
+      if (!scrollEl) return
+      if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
+        this.$nextTick(() => {
+          if (!scrollEl) return
+          scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
+        })
+      }
+    }
  }
 }

--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@ -10,17 +10,15 @@
        @click.stop.prevent="togglePanel"
      >
        <div class="title">
-          <span>{{ $t('shoutbox.title') }}</span>
+          {{ $t('shoutbox.title') }}
          <FAIcon
            v-if="floating"
            icon="times"
+            class="close-icon"
          />
        </div>
      </div>
-      <div
-        v-chat-scroll
-        class="chat-window"
-      >
+      <div class="chat-window">
        <div
          v-for="message in messages"
          :key="message.id"
@ -94,6 +92,13 @@
    .icon {
      color: $fallback--text;
      color: var(--text, $fallback--text);
+      margin-right: 0.5em;
+    }
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
    }
  }

--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@ -71,6 +71,14 @@
    }
  }

+  .global-success {
+    background-color: var(--alertPopupSuccess, $fallback--cGreen);
+    color: var(--alertPopupSuccessText, $fallback--text);
+    .svg-inline--fa {
+      color: var(--alertPopupSuccessText, $fallback--text);
+    }
+  }
+
  .global-info {
    background-color: var(--alertPopupNeutral, $fallback--fg);
    color: var(--alertPopupNeutralText, $fallback--text);
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@ -1,6 +1,11 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+
 import DialogModal from '../dialog_modal/dialog_modal.vue'
 import Popover from '../popover/popover.vue'

+library.add(faChevronDown)
+
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
 const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@ -124,10 +124,11 @@
      </div>
      <button
        slot="trigger"
-        class="btn button-default btn-block"
+        class="btn button-default btn-block moderation-tools-button"
        :class="{ toggled }"
      >
        {{ $t('user_card.admin_menu.moderation') }}
+        <FAIcon icon="chevron-down" />
      </button>
    </Popover>
    <portal to="modal">
@ -170,4 +171,10 @@
    height: 100%;
  }
 }
+
+.moderation-tools-button {
+  svg,i {
+    font-size: 0.8em;
+  }
+}
 </style>
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -1,4 +1,4 @@
-import { timelineNames } from '../timeline_menu/timeline_menu.js'
+import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'

 import { library } from '@fortawesome/fontawesome-svg-core'
@ -7,10 +7,12 @@ import {
  faGlobe,
  faBookmark,
  faEnvelope,
-  faHome,
+  faChevronDown,
+  faChevronUp,
  faComments,
  faBell,
-  faInfoCircle
+  faInfoCircle,
+  faStream
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
@ -18,10 +20,12 @@ library.add(
  faGlobe,
  faBookmark,
  faEnvelope,
-  faHome,
+  faChevronDown,
+  faChevronUp,
  faComments,
  faBell,
-  faInfoCircle
+  faInfoCircle,
+  faStream
 )

 const NavPanel = {
@ -30,16 +34,20 @@ const NavPanel = {
      this.$store.dispatch('startFetchingFollowRequests')
    }
  },
+  components: {
+    TimelineMenuContent
+  },
+  data () {
+    return {
+      showTimelines: false
+    }
+  },
+  methods: {
+    toggleTimelines () {
+      this.showTimelines = !this.showTimelines
+    }
+  },
  computed: {
-    onTimelineRoute () {
-      return !!timelineNames()[this.$route.name]
-    },
-    timelinesRoute () {
-      if (this.$store.state.interface.lastTimeline) {
-        return this.$store.state.interface.lastTimeline
-      }
-      return this.currentUser ? 'friends' : 'public-timeline'
-    },
    ...mapState({
      currentUser: state => state.users.currentUser,
      followRequestCount: state => state.api.followRequests.length,
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -3,19 +3,33 @@
    <div class="panel panel-default">
      <ul>
        <li v-if="currentUser || !privateMode">
-          <router-link
-            :to="{ name: timelinesRoute }"
-            :class="onTimelineRoute && 'router-link-active'"
+          <button
+            class="button-unstyled menu-item"
+            @click="toggleTimelines"
          >
            <FAIcon
              fixed-width
              class="fa-scale-110"
-              icon="home"
+              icon="stream"
            />{{ $t("nav.timelines") }}
-          </router-link>
+            <FAIcon
+              class="timelines-chevron"
+              fixed-width
+              :icon="showTimelines ? 'chevron-up' : 'chevron-down'"
+            />
+          </button>
+          <div
+            v-show="showTimelines"
+            class="timelines-background"
+          >
+            <TimelineMenuContent class="timelines" />
+          </div>
        </li>
        <li v-if="currentUser">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+          >
            <FAIcon
              fixed-width
              class="fa-scale-110"
@ -24,7 +38,10 @@
          </router-link>
        </li>
        <li v-if="currentUser && pleromaChatMessagesAvailable">
-          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+          >
            <div
              v-if="unreadChatCount"
              class="badge badge-notification"
@ -39,7 +56,10 @@
          </router-link>
        </li>
        <li v-if="currentUser && currentUser.locked">
-          <router-link :to="{ name: 'friend-requests' }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'friend-requests' }"
+          >
            <FAIcon
              fixed-width
              class="fa-scale-110"
@ -54,7 +74,10 @@
          </router-link>
        </li>
        <li>
-          <router-link :to="{ name: 'about' }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'about' }"
+          >
            <FAIcon
              fixed-width
              class="fa-scale-110"
@ -91,14 +114,14 @@
    border-color: var(--border, $fallback--border);
    padding: 0;

-    &:first-child a {
+    &:first-child .menu-item {
      border-top-right-radius: $fallback--panelRadius;
      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
      border-top-left-radius: $fallback--panelRadius;
      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
    }

-    &:last-child a {
+    &:last-child .menu-item {
      border-bottom-right-radius: $fallback--panelRadius;
      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
      border-bottom-left-radius: $fallback--panelRadius;
@ -110,13 +133,15 @@
    border: none;
  }

-  a {
+  .menu-item {
    display: block;
    box-sizing: border-box;
-    align-items: stretch;
    height: 3.5em;
    line-height: 3.5em;
    padding: 0 1em;
+    width: 100%;
+    color: $fallback--link;
+    color: var(--link, $fallback--link);

    &:hover {
      background-color: $fallback--lightBg;
@ -146,6 +171,25 @@
    }
  }

+  .timelines-chevron {
+    margin-left: 0.8em;
+    font-size: 1.1em;
+  }
+
+  .timelines-background {
+    padding: 0 0 0 0.6em;
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    border-top: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+
+  .timelines {
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+  }
+
  .fa-scale-110 {
    margin-right: 0.8em;
  }
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@ -0,0 +1,122 @@
+<template>
+  <Popover
+    trigger="click"
+    class="NotificationFilters"
+    placement="bottom"
+    :bound-to="{ x: 'container' }"
+  >
+    <template
+      v-slot:content
+    >
+      <div class="dropdown-menu">
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('likes')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.likes }"
+          />{{ $t('settings.notification_visibility_likes') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('repeats')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.repeats }"
+          />{{ $t('settings.notification_visibility_repeats') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('follows')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.follows }"
+          />{{ $t('settings.notification_visibility_follows') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('mentions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.mentions }"
+          />{{ $t('settings.notification_visibility_mentions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('emojiReactions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+          />{{ $t('settings.notification_visibility_emoji_reactions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('moves')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.moves }"
+          />{{ $t('settings.notification_visibility_moves') }}
+        </button>
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <FAIcon icon="filter" />
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter
+)
+
+export default {
+  components: { Popover },
+  computed: {
+    filters () {
+      return this.$store.getters.mergedConfig.notificationVisibility
+    }
+  },
+  methods: {
+    toggleNotificationFilter (type) {
+      this.$store.dispatch('setOption', {
+        name: 'notificationVisibility',
+        value: {
+          ...this.filters,
+          [type]: !this.filters[type]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.NotificationFilters {
+  align-self: stretch;
+
+  > button {
+    font-size: 1.2em;
+    padding-left: 0.7em;
+    padding-right: 0.2em;
+    line-height: 100%;
+    height: 100%;
+  }
+
+  .dropdown-item {
+    margin: 0;
+  }
+}
+
+</style>
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@ -1,5 +1,6 @@
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
+import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
  notificationsFromStore,
@ -17,6 +18,10 @@ library.add(
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30

 const Notifications = {
+  components: {
+    Notification,
+    NotificationFilters
+  },
  props: {
    // Disables display of panel header
    noHeading: Boolean,
@ -35,11 +40,6 @@ const Notifications = {
      seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
    }
  },
-  created () {
-    const store = this.$store
-    const credentials = store.state.users.currentUser.credentials
-    notificationsFetcher.fetchAndUpdate({ store, credentials })
-  },
  computed: {
    mainClass () {
      return this.minimalMode ? '' : 'panel panel-default'
@ -70,9 +70,6 @@ const Notifications = {
    },
    ...mapGetters(['unreadChatCount'])
  },
-  components: {
-    Notification
-  },
  watch: {
    unseenCountTitle (count) {
      if (count > 0) {
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -22,6 +22,7 @@
        >
          {{ $t('notifications.read') }}
        </button>
+        <NotificationFilters />
      </div>
      <div class="panel-body">
        <div
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@ -53,7 +53,7 @@
                type="submit"
                class="btn button-default btn-block"
              >
-                {{ $t('general.submit') }}
+                {{ $t('settings.save') }}
              </button>
            </div>
          </div>
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@ -56,6 +56,9 @@ const Popover = {
      // Popover will be anchored around this element, trigger ref is the container, so
      // its children are what are inside the slot. Expect only one slot="trigger".
      const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
+      // SVGs don't have offsetWidth/Height, use fallback
+      const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
+      const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
      const screenBox = anchorEl.getBoundingClientRect()
      // Screen position of the origin point for popover
      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
@ -114,11 +117,11 @@ const Popover = {

      const yOffset = (this.offset && this.offset.y) || 0
      const translateY = usingTop
-        ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
+        ? -anchorHeight + vPadding - yOffset - content.offsetHeight
        : yOffset

      const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
+      const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset

      // Note, separate translateX and translateY avoids blurry text on chromium,
      // single translate or translate3d resulted in blurry text.
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -272,7 +272,7 @@
          disabled
          class="btn button-default"
        >
-          {{ $t('general.submit') }}
+          {{ $t('post_status.post') }}
        </button>
        <!-- touchstart is used to keep the OSK at the same position after a message send -->
        <button
@ -282,7 +282,7 @@
          @touchstart.stop.prevent="postStatus($event, newStatus)"
          @click.stop.prevent="postStatus($event, newStatus)"
        >
-          {{ $t('general.submit') }}
+          {{ $t('post_status.post') }}
        </button>
      </div>
      <div
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -230,7 +230,7 @@
                type="submit"
                class="btn button-default"
              >
-                {{ $t('general.submit') }}
+                {{ $t('registration.register') }}
              </button>
            </div>
          </div>
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@ -24,7 +24,7 @@
        class="btn button-default"
        @click="updateNotificationSettings"
      >
-        {{ $t('general.submit') }}
+        {{ $t('settings.save') }}
      </button>
    </div>
  </div>
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -153,7 +153,7 @@
        class="btn button-default"
        @click="updateProfile"
      >
-        {{ $t('general.submit') }}
+        {{ $t('settings.save') }}
      </button>
    </div>
    <div class="setting-item">
@ -227,7 +227,7 @@
        class="btn button-default"
        @click="submitBanner(banner)"
      >
-        {{ $t('general.submit') }}
+        {{ $t('settings.save') }}
      </button>
    </div>
    <div class="setting-item">
@ -266,7 +266,7 @@
        class="btn button-default"
        @click="submitBackground(background)"
      >
-        {{ $t('general.submit') }}
+        {{ $t('settings.save') }}
      </button>
    </div>
  </div>
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@ -22,7 +22,7 @@
        class="btn button-default"
        @click="changeEmail"
      >
-        {{ $t('general.submit') }}
+        {{ $t('settings.save') }}
      </button>
      <p v-if="changedEmail">
        {{ $t('settings.changed_email') }}
@ -60,7 +60,7 @@
        class="btn button-default"
        @click="changePassword"
      >
-        {{ $t('general.submit') }}
+        {{ $t('settings.save') }}
      </button>
      <p v-if="changedPassword">
        {{ $t('settings.changed_password') }}
@ -133,7 +133,7 @@
        class="btn button-default"
        @click="confirmDelete"
      >
-        {{ $t('general.submit') }}
+        {{ $t('settings.save') }}
      </button>
    </div>
  </div>
--- a/src/components/timeline/timeline_quick_settings.js
+++ b/src/components/timeline/timeline_quick_settings.js
@ -1,5 +1,4 @@
 import Popover from '../popover/popover.vue'
-import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
@ -12,8 +11,7 @@ library.add(

 const TimelineQuickSettings = {
  components: {
-    Popover,
-    BooleanSetting
+    Popover
  },
  methods: {
    setReplyVisibility (visibility) {
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@ -6,7 +6,7 @@
  >
    <div
      slot="content"
-      class="timeline-settings-menu dropdown-menu"
+      class="dropdown-menu"
    >
      <div v-if="loggedIn">
        <button
@ -96,12 +96,6 @@
  .dropdown-item {
    margin: 0;
  }
-
-  .timeline-settings-menu {
-    display: flex;
-    min-width: 12em;
-    flex-direction: column;
-  }
 }

 </style>
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@ -1,29 +1,17 @@
 import Popover from '../popover/popover.vue'
-import { mapState } from 'vuex'
+import TimelineMenuContent from './timeline_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome,
  faChevronDown
 } from '@fortawesome/free-solid-svg-icons'

-library.add(
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome,
-  faChevronDown
-)
+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.timeline',
+    'friends': 'nav.home_timeline',
    'bookmarks': 'nav.bookmarks',
    'dms': 'nav.dms',
    'public-timeline': 'nav.public_tl',
@ -33,7 +21,8 @@ export const timelineNames = () => {

 const TimelineMenu = {
  components: {
-    Popover
+    Popover,
+    TimelineMenuContent
  },
  data () {
    return {
@ -41,9 +30,6 @@ const TimelineMenu = {
    }
  },
  created () {
-    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequests')
-    }
    if (timelineNames()[this.$route.name]) {
      this.$store.dispatch('setLastTimeline', this.$route.name)
    }
@ -75,13 +61,6 @@ const TimelineMenu = {
      const i18nkey = timelineNames()[this.$route.name]
      return i18nkey ? this.$t(i18nkey) : route
    }
-  },
-  computed: {
-    ...mapState({
-      currentUser: state => state.users.currentUser,
-      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
-    })
  }
 }

--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@ -13,53 +13,7 @@
      slot="content"
      class="timeline-menu-popover panel panel-default"
    >
-      <ul>
-        <li v-if="currentUser">
-          <router-link :to="{ name: 'friends' }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="home"
-            />{{ $t("nav.timeline") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser">
-          <router-link :to="{ name: 'bookmarks'}">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="bookmark"
-            />{{ $t("nav.bookmarks") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser">
-          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="envelope"
-            />{{ $t("nav.dms") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser || !privateMode">
-          <router-link :to="{ name: 'public-timeline' }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="users"
-            />{{ $t("nav.public_tl") }}
-          </router-link>
-        </li>
-        <li v-if="federating && (currentUser || !privateMode)">
-          <router-link :to="{ name: 'public-external-timeline' }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="globe"
-            />{{ $t("nav.twkn") }}
-          </router-link>
-        </li>
-      </ul>
+      <TimelineMenuContent />
    </div>
    <div
      slot="trigger"
--- a/src/components/timeline_menu/timeline_menu_content.js
+++ b/src/components/timeline_menu/timeline_menu_content.js
@ -0,0 +1,29 @@
+import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome
+)
+
+const TimelineMenuContent = {
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    })
+  }
+}
+
+export default TimelineMenuContent
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@ -0,0 +1,66 @@
+<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"
+        />{{ $t("nav.home_timeline") }}
+      </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"
+        />{{ $t("nav.public_tl") }}
+      </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"
+        />{{ $t("nav.twkn") }}
+      </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"
+        />{{ $t("nav.bookmarks") }}
+      </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"
+        />{{ $t("nav.dms") }}
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script src="./timeline_menu_content.js" ></script>
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -141,10 +141,10 @@
                v-model="userHighlightType"
                class="userHighlightSel"
              >
-                <option value="disabled">No highlight</option>
-                <option value="solid">Solid bg</option>
-                <option value="striped">Striped bg</option>
-                <option value="side">Side stripe</option>
+                <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
+                <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
+                <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
+                <option value="side">{{ $t('user_card.highlight.side') }}</option>
              </select>
              <FAIcon
                class="select-down-icon"