add language tags

use-server-side-mfm (#133 )
Reviewed-on: AkkomaGang/pleroma-fe#133
2022-08-23 16:12:06 +01:00 · 2022-08-18 03:14:38 +00:00 · 2022-08-17 09:34:50 +00:00 · 2022-08-17 08:41:36 +00:00 · 2022-08-14 23:24:59 +00:00 · 2022-08-11 17:25:43 +00:00
41 changed files with 706 additions and 126 deletions
--- a/README.md
+++ b/README.md
@ -1,5 +1,7 @@
 # Pleroma-FE 

+![English OK](https://img.shields.io/badge/English-OK-blueviolet) ![日本語OK](https://img.shields.io/badge/%E6%97%A5%E6%9C%AC%E8%AA%9E-OK-blueviolet)
+
 This is a fork of Pleroma-FE from the Pleroma project, with support for new Akkoma features such as:
 - MFM support via [marked-mfm](https://akkoma.dev/sfr/marked-mfm)
 - Custom emoji reactions
--- a/package.json
+++ b/package.json
@ -19,7 +19,7 @@
    "@babel/runtime": "7.17.8",
    "@chenfengyuan/vue-qrcode": "2.0.0",
    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/vue-fontawesome": "3.0.1",
    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -124,6 +124,11 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('hideBotIndication')
  copyInstanceOption('hideUserStats')
  copyInstanceOption('hideFilteredStatuses')
+  copyInstanceOption('hideSiteName')
+  copyInstanceOption('hideSiteFavicon')
+  copyInstanceOption('showWiderShortcuts')
+  copyInstanceOption('showNavShortcuts')
+  copyInstanceOption('showPanelNavShortcuts')
  copyInstanceOption('logo')

  store.dispatch('setInstanceOption', {
@ -154,6 +159,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('alwaysShowSubjectInput')
  copyInstanceOption('showFeaturesPanel')
  copyInstanceOption('hideSitename')
+  copyInstanceOption('renderMisskeyMarkdown')
  copyInstanceOption('sidebarRight')

  return store.dispatch('setTheme', config['theme'])
@ -377,8 +383,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
    routes: routes(store),
    scrollBehavior: (to, _from, savedPosition) => {
      if (to.matched.some(m => m.meta.dontScroll)) {
-        return false
+        return {}
      }
+
      return savedPosition || { left: 0, top: 0 }
    }
  })
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -58,7 +58,7 @@ export default (store) => {
      component: RemoteUserResolver,
      beforeEnter: validateAuthenticatedRoute
    },
-    { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
+    { name: 'external-user-profile', path: '/users/:id', component: UserProfile, meta: { dontScroll: true } },
    { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
    { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
    { name: 'registration', path: '/registration', component: Registration },
@ -75,7 +75,7 @@ export default (store) => {
    { name: 'list-timeline', path: '/lists/:id', component: ListTimeline },
    { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit },
    { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
+    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile, meta: { dontScroll: true } }
  ]

  return routes
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@ -5,12 +5,16 @@ import {
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
  faUserPlus,
  faBullhorn,
  faSearch,
  faTachometerAlt,
  faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
  faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'

@ -19,12 +23,16 @@ library.add(
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
  faUserPlus,
  faBullhorn,
  faSearch,
  faTachometerAlt,
  faCog,
+  faGlobe,
+  faBolt,
+  faUsers,
+  faCommentMedical,
+  faBookmark,
  faInfoCircle
 )

@ -65,7 +73,22 @@ export default {
      })
    },
    logo () { return this.$store.state.instance.logo },
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
    sitename () { return this.$store.state.instance.name },
+    showNavShortcuts () {
+      return this.mergedConfig.showNavShortcuts
+    },
+    showWiderShortcuts () {
+      return this.mergedConfig.showWiderShortcuts
+    },
+    hideSiteFavicon () {
+      return this.mergedConfig.hideSiteFavicon
+    },
+    hideSiteName () {
+      return this.mergedConfig.hideSiteName
+    },
    hideSitename () { return this.$store.state.instance.hideSitename },
    logoLeft () { return this.$store.state.instance.logoLeft },
    currentUser () { return this.$store.state.users.currentUser },
@ -75,10 +98,6 @@ export default {
    scrollToTop () {
      window.scrollTo(0, 0)
    },
-    logout () {
-      this.$router.replace('/main/public')
-      this.$store.dispatch('logout')
-    },
    onSearchBarToggled (hidden) {
      this.searchBarHidden = hidden
    },
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -15,16 +15,16 @@
    display: grid;
    grid-template-rows: var(--navbar-height);
    grid-template-columns: 2fr auto 2fr;
-    grid-template-areas: "sitename logo actions";
+    grid-template-areas: "nav-left logo actions";
    box-sizing: border-box;
    padding: 0 1.2em;
    margin: auto;
-    max-width: 980px;
+    max-width: 1110px;
  }

  &.-logoLeft .inner-nav {
    grid-template-columns: auto 2fr 2fr;
-    grid-template-areas: "logo sitename actions";
+    grid-template-areas: "logo nav-left actions";
  }

  .button-default {
@ -84,14 +84,21 @@
  }

  .nav-icon {
-    margin-left: 1em;
+    margin-left: 0.2em;
    width: 2em;
    height: 100%;
-    font-size: 130%;
    text-align: center;

-    &-logout {
-      margin-left: 2em;
+    &.router-link-active {
+      font-size: 1.2em;
+      margin-top: 0.05em;
+
+      .svg-inline--fa {
+        font-weight: bolder;
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+        --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      }
    }

    .svg-inline--fa {
@ -100,8 +107,25 @@
    }
  }

-  .sitename {
-    grid-area: sitename;
+  .-wide {
+    .nav-icon {
+      margin-left: 0.7em;
+    }
+  }
+
+  .left {
+    padding-left: 5px;
+    display: flex;
+  }
+
+  .nav-left-wrapper {
+    grid-area: nav-left;
+
+    .favicon {
+      height: 28px;
+      vertical-align: middle;
+      padding-right: 5px;
+    }
  }

  .actions {
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -5,16 +5,79 @@
    :class="{ '-logoLeft': logoLeft }"
    @click="scrollToTop()"
  >
-    <div class="inner-nav">
-      <div class="item sitename">
+    <div
+      class="inner-nav"
+      :class="{ '-wide': showWiderShortcuts }"
+    >
+      <div class="item nav-left-wrapper">
        <router-link
-          v-if="!hideSitename"
-          class="site-name"
+          class="site-brand"
          :to="{ name: 'root' }"
          active-class="home"
        >
-          {{ sitename }}
+          <img
+            v-if="!hideSiteFavicon"
+            class="favicon"
+            src="/favicon.png"
+          >
+          <span
+            v-if="!hideSiteName"
+            class="site-name"
+          >
+            {{ sitename }}
+          </span>
        </router-link>
+        <div
+          v-if="(currentUser || !privateMode) && showNavShortcuts"
+          class="nav-items left"
+        >
+          <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')"
+            />
+          </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_tl')"
+            />
+          </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="circle"
+              :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
        class="logo"
@ -36,6 +99,47 @@
          @toggled="onSearchBarToggled"
          @click.stop
        />
+        <div
+          v-if="(currentUser || !privateMode) && showNavShortcuts"
+          class="nav-items right"
+        >
+          <router-link
+            class="nav-icon"
+            v-if="currentUser"
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bolt"
+              :title="$t('nav.interactions')"
+            />
+          </router-link>
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'lists' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="list"
+              :title="$t('nav.lists')"
+            />
+          </router-link>
+          <router-link
+            v-if="currentUser"
+            :to="{ name: 'bookmarks' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bookmark"
+              :title="$t('nav.bookmarks')"
+            />
+          </router-link>
+        </div>
        <button
          class="button-unstyled nav-icon"
          @click.stop="openSettingsModal"
@ -61,18 +165,6 @@
            :title="$t('nav.administration')"
          />
        </a>
-        <button
-          v-if="currentUser"
-          class="button-unstyled nav-icon nav-icon-logout"
-          @click.prevent="logout"
-        >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="sign-out-alt"
-            :title="$t('login.logout')"
-          />
-        </button>
      </div>
    </div>
  </nav>
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -491,11 +491,10 @@ const EmojiInput = {
    },
    setPlacement (container, target, offsetBottom) {
      if (!container || !target) return
-
-      target.style.top = offsetBottom + 'px'
-      target.style.bottom = 'auto'
-
-      if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
+      if (this.placement === 'bottom' || (this.placement === 'auto' && !this.overflowsBottom(container))) {
+        target.style.top = offsetBottom + 'px'
+        target.style.bottom = 'auto'
+      } else {
        target.style.top = 'auto'
        target.style.bottom = this.input.offsetHeight + 'px'
      }
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@ -27,7 +27,11 @@ const EmojiReactions = {
    },
    accountsForEmoji () {
      return this.status.emoji_reactions.reduce((acc, reaction) => {
-        acc[reaction.name] = reaction.accounts || []
+        if (reaction.url) {
+          acc[reaction.url] = reaction.accounts || []
+        } else {
+          acc[reaction.name] = reaction.accounts || []
+        }
        return acc
      }, {})
    },
@ -42,6 +46,14 @@ const EmojiReactions = {
    reactedWith (emoji) {
      return this.status.emoji_reactions.find(r => r.name === emoji).me
    },
+    isLocalReaction (emojiUrl) {
+      if (!emojiUrl) return true
+      const reacted = this.accountsForEmoji[emojiUrl]
+      if (reacted.length === 0) {
+        return true
+      }
+      return reacted[0].is_local
+    },
    fetchEmojiReactionsByIfMissing () {
      const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
      if (hasNoAccounts) {
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@ -2,12 +2,13 @@
  <div class="emoji-reactions">
    <UserListPopover
      v-for="(reaction) in emojiReactions"
-      :key="reaction.name"
-      :users="accountsForEmoji[reaction.name]"
+      :key="reaction.url || reaction.name"
+      :users="accountsForEmoji[reaction.url || reaction.name]"
    >
      <button
        class="emoji-reaction btn button-default"
        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :disabled="!isLocalReaction(reaction.url)"
        @click="emojiOnClick(reaction.name, $event)"
        @mouseenter="fetchEmojiReactionsByIfMissing()"
      >
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@ -41,7 +41,12 @@ const MobileNav = {
    unseenNotificationsCount () {
      return this.unseenNotifications.length
    },
-    hideSitename () { return this.$store.state.instance.hideSitename },
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    hideSiteName () {
+      return this.mergedConfig.hideSiteName
+    },
    sitename () { return this.$store.state.instance.name }
  },
  methods: {
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -22,7 +22,7 @@
          />
        </button>
        <router-link
-          v-if="!hideSitename"
+          v-if="!hideSiteName"
          class="site-name"
          :to="{ name: 'root' }"
          active-class="home"
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/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%;
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -10,7 +10,7 @@ import {
  faChevronDown,
  faChevronUp,
  faComments,
-  faBell,
+  faBolt,
  faInfoCircle,
  faStream,
  faList,
@ -25,7 +25,7 @@ library.add(
  faChevronDown,
  faChevronUp,
  faComments,
-  faBell,
+  faBolt,
  faInfoCircle,
  faStream,
  faList,
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -45,7 +45,7 @@
            <FAIcon
              fixed-width
              class="fa-scale-110"
-              icon="bell"
+              icon="bolt"
            />{{ $t("nav.interactions") }}
          </router-link>
        </li>
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@ -148,20 +148,22 @@ export default {
      mfmHtml.innerHTML = marked.parse(content)

      // Add options with set values to CSS
-      Array.from(mfmHtml.content.firstChild.getElementsByClassName('mfm')).map((el) => {
-        if (el.dataset.speed) {
-          el.style.animationDuration = el.dataset.speed
-        }
-        if (el.dataset.deg) {
-          el.style.transform = `rotate(${el.dataset.deg}deg)`
-        }
-        if (Array.from(el.classList).includes('_mfm_font_')) {
-          const font = Object.keys(el.dataset)[0]
-          if (['serif', 'monospace', 'cursive', 'fantasy', 'emoji', 'math'].includes(font)) {
-            el.style.fontFamily = font
+      if (mfmHtml.content.firstChild) {
+        Array.from(mfmHtml.content.firstChild.getElementsByClassName('mfm')).map((el) => {
+          if (el.dataset.speed) {
+            el.style.animationDuration = el.dataset.speed
          }
-        }
-      })
+          if (el.dataset.deg) {
+            el.style.transform = `rotate(${el.dataset.deg}deg)`
+          }
+          if (Array.from(el.classList).includes('_mfm_font_')) {
+            const font = Object.keys(el.dataset)[0]
+            if (['serif', 'monospace', 'cursive', 'fantasy', 'emoji', 'math'].includes(font)) {
+              el.style.fontFamily = font
+            }
+          }
+        })
+      }

      return mfmHtml.innerHTML
    }
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@ -14,6 +14,7 @@ import {
  faTimes,
  faFileUpload,
  faFileDownload,
+  faSignOutAlt,
  faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
 import {
@ -28,6 +29,7 @@ library.add(
  faWindowMinimize,
  faFileUpload,
  faFileDownload,
+  faSignOutAlt,
  faChevronDown
 )

@ -66,6 +68,11 @@ const SettingsModal = {
    closeModal () {
      this.$store.dispatch('closeSettingsModal')
    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('closeSettingsModal')
+      this.$store.dispatch('logout')
+    },
    peekModal () {
      this.$store.dispatch('togglePeekSettingsModal')
    },
@ -150,6 +157,7 @@ const SettingsModal = {
    }
  },
  computed: {
+    currentUser () { return this.$store.state.users.currentUser },
    currentSaveStateNotice () {
      return this.$store.state.interface.settings.currentSaveStateNotice
    },
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@ -71,5 +71,11 @@
      display: flex;
      flex-grow: 1;
    }
+
+    .logout-button {
+      position: absolute;
+      right: 20px;
+      padding-right: 10px;
+    }
  }
 }
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -111,6 +111,20 @@
          id="unscrolled-content"
          class="extra-content"
        />
+        <button
+          v-if="currentUser"
+          class="button-default logout-button"
+          :title="$t('login.logout')"
+          :aria-label="$t('login.logout')"
+          @click.prevent="logout"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+          />
+          <span>{{ $t('login.logout') }}</span>
+        </button>
      </div>
    </div>
  </Modal>
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -25,6 +25,46 @@
            {{ $t('settings.hide_wallpaper') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting
+            path="hideSiteFavicon"
+            expert="1"
+          >
+            {{ $t('settings.hide_site_favicon') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="hideSiteName"
+            expert="1"
+          >
+            {{ $t('settings.hide_site_name') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="showNavShortcuts"
+            expert="1"
+          >
+            {{ $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"
+            expert="1"
+          >
+            {{ $t('settings.show_wider_shortcuts') }}
+          </BooleanSetting>
+        </li>
        <li>
          <BooleanSetting path="stopGifs">
            {{ $t('settings.stop_gifs') }}
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@ -8,7 +8,7 @@ import {
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
+  faBolt,
  faUserPlus,
  faBullhorn,
  faSearch,
@ -23,7 +23,7 @@ library.add(
  faSignOutAlt,
  faHome,
  faComments,
-  faBell,
+  faBolt,
  faUserPlus,
  faBullhorn,
  faSearch,
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -74,7 +74,7 @@
            <FAIcon
              fixed-width
              class="fa-scale-110 fa-old-padding"
-              icon="bell"
+              icon="bolt"
            /> {{ $t("nav.interactions") }}
          </router-link>
        </li>
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@ -103,6 +103,9 @@ const StatusContent = {
    renderMfmOnHover () {
      return this.mergedConfig.renderMfmOnHover
    },
+    renderMisskeyMarkdown () {
+      return this.mergedConfig.renderMisskeyMarkdown
+    },
    ...mapGetters(['mergedConfig']),
    ...mapState({
      currentUser: state => state.users.currentUser
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@ -1,7 +1,7 @@
 <template>
  <div
    class="StatusContent"
-    :class="{ '-compact': compact, 'mfm-hover': renderMfmOnHover }"
+    :class="{ '-compact': compact, 'mfm-hover': renderMfmOnHover, 'mfm-disabled': !renderMisskeyMarkdown }"
  >
    <slot name="header" />
    <StatusBody
@ -78,7 +78,12 @@

  &.mfm-hover:not(:hover) {
    .mfm {
-      animation: none;
+      animation: none !important;
+    }
+  }
+  &.mfm-disabled {
+    .mfm {
+      animation: none !important;
    }
  }
 }
--- a/src/components/timeline/timeline.js
+++ b/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 () {
--- a/src/components/timeline/timeline.vue
+++ b/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"
--- a/src/components/timeline_menu_tabs/timeline_menu_content.js
+++ b/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
--- a/src/components/timeline_menu_tabs/timeline_menu_content.vue
+++ b/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>
--- a/src/components/timeline_menu_tabs/timeline_menu_tabs.js
+++ b/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
--- a/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
+++ b/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>
--- a/src/components/user_card/user_card.js
+++ b/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 () {
--- a/src/components/user_card/user_card.vue
+++ b/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>
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@ -49,7 +49,7 @@ const UserProfile = {
  created () {
    const routeParams = this.$route.params
    this.load(routeParams.name || routeParams.id)
-    this.tab = get(this.$route, 'query.tab', defaultTabKey)
+    this.tab = get(this.$route, 'query.hash', defaultTabKey).replace(/^#/, '')
  },
  unmounted () {
    this.stopFetching()
@ -146,7 +146,7 @@ const UserProfile = {
    },
    onTabSwitch (tab) {
      this.tab = tab
-      this.$router.replace({ query: { tab } })
+      this.$router.replace({ hash: `#${tab}` })
    },
    linkClicked ({ target }) {
      if (target.tagName === 'SPAN') {
@ -176,8 +176,8 @@ const UserProfile = {
        this.switchUser(newVal)
      }
    },
-    '$route.query': function (newVal) {
-      this.tab = newVal.tab || defaultTabKey
+    '$route.hash': function (newVal) {
+      this.tab = newVal.replace(/^#/, '') || defaultTabKey
    }
  },
  components: {
--- a/src/i18n/ca.json
+++ b/src/i18n/ca.json
@ -1,5 +1,7 @@
 {
    "about": {
+        "bubble_instances": "Instàncies de la Bombolla Local",
+        "bubble_instances_description": "Instàncies triades per els administradors per a representar l'àrea local d'aquesta instància",
        "mrf": {
            "federation": "Federació",
            "keyword": {
@ -136,6 +138,7 @@
        },
        "scope_in_timeline": {
            "direct": "Directe",
+            "local": "Local - només la teva instància veu aquest apunt",
            "private": "Només seguidors",
            "public": "Públic",
            "unlisted": "No llistat"
@ -218,7 +221,7 @@
        "search": "Cerca",
        "timeline": "Línia de temps",
        "timelines": "Línies de temps",
-        "twkn": "Xarxa coneguda",
+        "twkn": "Xarxa Coneguda",
        "twkn_timeline_description": "Apunts de tota la xarxa",
        "user_search": "Cerca d'usuaris",
        "who_to_follow": "A qui seguir"
@ -226,7 +229,7 @@
    "notifications": {
        "broken_favorite": "Apunt desconegut, cercant-lo…",
        "error": "Error obtenint notificacions: {0}",
-        "favorited_you": "ha afavorit un apunt teu",
+        "favorited_you": "ha afavorit el teu apunt",
        "follow_request": "et vol seguir",
        "followed_you": "ha començat a seguir-te",
        "load_older": "Carrega notificacions més velles",
@ -281,11 +284,11 @@
        "default": "Just ara he arribat a Catalunya",
        "direct_warning_to_all": "Aquest apunt serà visible per a tots els usuaris mencionats.",
        "direct_warning_to_first_only": "Aquest apunt només serà visible per als usuaris mencionats al principi del missatge.",
-        "empty_status_error": "No es pot publicar un apunt buit sense fitxers adjunts",
+        "empty_status_error": "No es pot enviar un apunt buit i sense fitxers adjunts",
        "media_description": "Descripció multimèdia",
        "media_description_error": "Ha fallat la pujada del Mèdia, prova de nou",
        "media_not_sensitive_warning": "Tens un Avís de Contingut però els adjunts no estan marcats com a sensibles!",
-        "new_status": "Publica un nou apunt",
+        "new_status": "Nou apunt",
        "post": "Apunt",
        "posting": "Publicant",
        "preview": "Vista prèvia",
@ -306,7 +309,7 @@
    },
    "registration": {
        "bio": "Bio",
-        "bio_placeholder": "p.e.\nHola, sóc la Lain.\nSóc una noia anime que viu a un suburbi de Japó. Potser em coneixes per Wired.",
+        "bio_placeholder": "p.e.\nHola! Benvingut a la meva bio.\nM'encanta veure anime i jugar a jocs. Espero que podrem ser amics!",
        "captcha": "CAPTCHA",
        "email": "Adreça de Correu",
        "email_language": "En quina llengua vols rebre els correus del servidor?",
@ -431,7 +434,7 @@
            "restore_settings": "Restaurar configuració des d'un fitxer"
        },
        "filtering": "Filtrant",
-        "filtering_explanation": "Es silenciaran tots els apunts que continguin aquestes paraules, una per línia",
+        "filtering_explanation": "Tots els apunts que continguin aquestes paraules seran silenciats, un per línia",
        "follow_export": "Exporta els seguits",
        "follow_export_button": "Exporta els teus seguits a un fitxer CSV",
        "follow_import": "Importa els seguits",
@ -441,7 +444,7 @@
        "fun": "Divertit",
        "general": "General",
        "greentext": "Text verd (meme arrows)",
-        "hide_all_muted_posts": "Ocultar apunts silenciades",
+        "hide_all_muted_posts": "Amaga apunts silenciats",
        "hide_attachments_in_convo": "Amaga els adjunts en les converses",
        "hide_attachments_in_tl": "Amaga els adjunts en la línia de temps",
        "hide_bot_indication": "Amaga l'indicació de bot en els apunts",
@ -453,7 +456,7 @@
        "hide_follows_description": "No mostrar a qui segueixo",
        "hide_isp": "Amaga el panell especific de l'instància",
        "hide_list_aliases_error_action": "Tanca",
-        "hide_media_previews": "Ocultar les vistes prèvies multimèdia",
+        "hide_media_previews": "Amaga les vistes prèvies de multimèdia",
        "hide_muted_posts": "Amaga els apunts de comptes silenciats",
        "hide_muted_threads": "Amaga fils silenciats",
        "hide_post_stats": "Amaga les estadístiques dels apunts (p. ex. el número de favorits)",
@ -482,7 +485,7 @@
        "mascot": "Mascota de Mastodon FE",
        "max_depth_in_thread": "Màxim número de nivells en el fil per mostrar per defecte",
        "max_thumbnails": "Quantitat màxima de miniatures per apunt (buit = sense limit)",
-        "mention_link_bolden_you": "Destaca mencions per tu quan et mencionin",
+        "mention_link_bolden_you": "Destaca mencions per a tu quan et mencionin",
        "mention_link_display": "Mostra els enllaços de mencions",
        "mention_link_display_full": "sempre com a noms complets (p. ex. {'@'}maria{'@'}exemple.cat)",
        "mention_link_display_full_for_remote": "com a noms complets només per a usuaris remots (p. ex.. {'@'}maria{'@'}exemple.cat)",
@ -519,7 +522,7 @@
        "move_account_notes": "Si vols moure el compte a un altre lloc has d'anar a aquest altre compte i afegir un àlies que apunti a aquest.",
        "move_account_target": "Compte destí (p.ex. {example})",
        "moved_account": "El compte s'ha mogut.",
-        "mute_bot_posts": "Silencia publicacions de bot",
+        "mute_bot_posts": "Silencia apunts de bots",
        "mute_export": "Exportar silenciats",
        "mute_export_button": "Exportar els teus silenciats a un fitxer csv",
        "mute_import": "Importar silenciats",
@ -548,7 +551,7 @@
        "notification_visibility_likes": "m'afavoreix",
        "notification_visibility_mentions": "em menciona",
        "notification_visibility_moves": "es mou",
-        "notification_visibility_polls": "finalitza una enquesta on hi has votat",
+        "notification_visibility_polls": "finalitza una enquesta que he votat",
        "notification_visibility_repeats": "em repeteix",
        "notifications": "Notificacions",
        "nsfw_clickthrough": "Amaga els Mèdia sensibles/NSFW",
@ -558,7 +561,7 @@
        "pause_on_unfocused": "Pausa quan la pestanya perdi el focus",
        "play_videos_in_modal": "Reproduir vídeos en un marc emergent",
        "post_look_feel": "Aspecte i Sensació dels apunts",
-        "post_status_content_type": "Tipus de contingut del apunt",
+        "post_status_content_type": "Tipus de contingut d'apunt predeterminat",
        "posts": "Apunts",
        "preload_images": "Precarregar les imatges",
        "presets": "Temes",
@ -576,12 +579,13 @@
        "remove_alias": "Elimina aquest àlies",
        "remove_backup": "Treure",
        "render_mfm": "Renderitza Markdown de Misskey",
+        "render_mfm_on_hover": "Pausa les animacions MFM fins que el cursor sigui sobre l'apunt",
        "replies_in_timeline": "Respostes en línia de temps",
        "reply_visibility_all": "Mostra totes les respostes",
        "reply_visibility_following": "Mostra només les respostes dirigides a mi o a usuaris que segueixo",
-        "reply_visibility_following_short": "Mostrar respostes als meus seguits",
+        "reply_visibility_following_short": "Mostra respostes als meus seguits",
        "reply_visibility_self": "Mostra només les respostes dirigides a mi",
-        "reply_visibility_self_short": "Mostrar només respostes a mi mateix",
+        "reply_visibility_self_short": "Mostra només respostes a mi mateix",
        "reset_avatar": "Restablir l'avatar",
        "reset_avatar_confirm": "Realment vols restablir l'avatar?",
        "reset_background_confirm": "Realment vols restablir el fons?",
@ -598,7 +602,7 @@
        "search_user_to_mute": "Busca a qui vols silenciar",
        "security": "Seguretat",
        "security_tab": "Seguretat",
-        "sensitive_by_default": "Marcar apunts com a sensibles per defecte",
+        "sensitive_by_default": "Marca apunts com a sensibles per defecte",
        "sensitive_if_subject": "Marca automàticament les imatges com a sensibles si s'ha especificat la línia assumpte",
        "set_new_avatar": "Establir un nou avatar",
        "set_new_mascot": "Establir una nova mascota",
@ -611,7 +615,7 @@
        "show_moderator_badge": "Mostra l'insígnia \"Moderador\" en el meu perfil",
        "show_scrollbars": "Mostra les barres de desplaçament de la columna lateral",
        "show_yous": "Mostra (Tu)s",
-        "stop_gifs": "Anima les imatges animades fins que hi passis el cursor per sobre",
+        "stop_gifs": "Pausa les imatges animades fins que hi passis el cursor per sobre",
        "streaming": "Mostra automàticament els nous apunts quan et desplacis a la part superior",
        "style": {
            "advanced_colors": {
@ -807,7 +811,7 @@
        "attachment_stop_flash": "Para el reproductor Flash",
        "bookmark": "Marcador",
        "collapse_attachments": "Replega adjunts",
-        "copy_link": "Copia l'enllaç al apunt",
+        "copy_link": "Copia l'enllaç a l'apunt",
        "delete": "Esborra l'apunt",
        "delete_confirm": "Segur que vols esborrar aquest apunt?",
        "expand": "Expandeix",
@ -817,7 +821,7 @@
        "hide_content": "Amaga el contingut",
        "hide_full_subject": "Amaga tot l'assumpte",
        "many_attachments": "L'apunt té {number} adjunt | L'apunt té {number} adjunts",
-        "mentions": "Mencions",
+        "mentions": "Menciona",
        "move_down": "Mou l'adjunt a la dreta",
        "move_up": "Mou l'adjunt a l'esquerra",
        "mute_conversation": "Silencia la conversa",
@ -832,7 +836,7 @@
        "replies_list_with_others": "Respostes (+{numReplies} altre): | Respostes (+{numReplies} altres):",
        "reply_to": "Respon a",
        "show_all_attachments": "Mostra tots els adjunts",
-        "show_all_conversation": "Mostra la conversa sencera ({numStatus} altres apunts) | Mostra la conversa sencera ({numStatus} altres apunts)",
+        "show_all_conversation": "Mostra la conversa sencera ({numStatus} altre apunt) | Mostra la conversa sencera ({numStatus} altres apunts)",
        "show_all_conversation_with_icon": "{icon} {text}",
        "show_attachment_description": "Descripció prèvia (obre l'adjunt per a descripció sencera)",
        "show_attachment_in_modal": "Mostra en el modal de Mèdia",
@ -841,13 +845,13 @@
        "show_only_conversation_under_this": "Només mostra respostes a aquest apunt",
        "status_deleted": "Aquest apunt ha estat esborrat",
        "status_unavailable": "Apunt no disponible",
-        "thread_follow": "Mira la part restant del fil ({numStatus} apunts en total) | Mira la part restant del fil ({numStatus} apunts en total)",
+        "thread_follow": "Mira la part restant d'aquest fil ({numStatus} apunt en total) | Mira la part restant d'aquest fil ({numStatus} apunts en total)",
        "thread_follow_with_icon": "{icon} {text}",
        "thread_hide": "Amaga aquest fil",
        "thread_muted": "Fil silenciat",
        "thread_muted_and_words": ", té les paraules:",
        "thread_show": "Mostra aquest fil",
-        "thread_show_full": "Mostra-ho tot sota aquest fil ({numStatus} apunts en total, màx. profunditat {depth}) | Mostra-ho tot sota aquest fil ({numStatus} apunts en total, màx. profunditat {depth})",
+        "thread_show_full": "Mostra-ho tot sota aquest fil ({numStatus} apunt en total, màx. profunditat {depth}) | Mostra-ho tot sota aquest fil ({numStatus} apunts en total, màx. profunditat {depth})",
        "thread_show_full_with_icon": "{icon} {text}",
        "unbookmark": "Desmarca",
        "unmute_conversation": "Deixa de silenciar la conversa",
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -400,7 +400,7 @@
        "conversation_display_linear": "Linear-style",
        "conversation_display_tree": "Tree-style",
        "conversation_other_replies_button": "Show the \"other replies\" button",
-        "conversation_other_replies_button_below": "Below statuses",
+        "conversation_other_replies_button_below": "Below posts",
        "conversation_other_replies_button_inside": "Inside posts",
        "current_avatar": "Your current avatar",
        "current_mascot": "Your current mascot",
@ -461,6 +461,8 @@
        "hide_muted_threads": "Hide muted threads",
        "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
        "hide_shoutbox": "Hide instance shoutbox",
+        "hide_site_favicon": "Hide instance favicon in top panel",
+        "hide_site_name": "Hide instance name in top panel",
        "hide_threads_with_blocked_users": "Hide threads mentioning blocked users",
        "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
        "hide_wallpaper": "Hide instance wallpaper",
@ -613,7 +615,10 @@
        "settings": "Settings",
        "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",
        "stop_gifs": "Pause animated images until you hover on them",
        "streaming": "Automatically show new posts when scrolled to the top",
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@ -1,5 +1,7 @@
 {
    "about": {
+        "bubble_instances": "ローカルバブルのインスタンス",
+        "bubble_instances_description": "管理者がおすすめしているインスタンス",
        "mrf": {
            "federation": "連合",
            "keyword": {
@ -876,4 +878,4 @@
        "more": "詳細",
        "who_to_follow": "おすすめユーザー"
    }
-}
+}
--- a/src/i18n/nl.json
+++ b/src/i18n/nl.json
@ -1,9 +1,11 @@
 {
    "about": {
+        "bubble_instances": "Lokale Bubbel-instanties",
+        "bubble_instances_description": "Instanties die gekozen zijn door de beheerders om de lokale omgeving van deze instantie te representeren",
        "mrf": {
            "federation": "Federatie",
            "keyword": {
-                "ftl_removal": "Verwijderen van \"Het Gehele Netwerk\" Tijdlijn",
+                "ftl_removal": "Verwijderen van \"Het Globale Netwerk\" Tijdlijn",
                "is_replaced_by": "→",
                "keyword_policies": "Zoekwoordbeleid",
                "reject": "Afwijzen",
@ -14,10 +16,10 @@
            "simple": {
                "accept": "Accepteren",
                "accept_desc": "Deze instantie accepteert alleen berichten van de volgende instanties:",
-                "ftl_removal": "Verwijderen van \"Bekende Netwerk\" Tijdlijn",
-                "ftl_removal_desc": "Deze instantie verwijdert de volgende instanties van \"Bekende Netwerk\" tijdlijn:",
+                "ftl_removal": "Verwijderen van \"Globale Netwerk\" Tijdlijn",
+                "ftl_removal_desc": "Deze instantie verwijdert de volgende instanties van \"Globale Netwerk\" tijdlijn:",
                "instance": "Instantie",
-                "media_nsfw": "Media als gevoelig forceren",
+                "media_nsfw": "Media als gevoelig markeren",
                "media_nsfw_desc": "Deze instantie markeert media als gevoelig in berichten van de volgende instanties:",
                "media_removal": "Verwijderen van media",
                "media_removal_desc": "Deze instantie verwijdert media van berichten van de volgende instanties:",
@ -26,8 +28,8 @@
                "quarantine_desc": "Deze instantie zal géén berichten sturen naar de volgende instanties:",
                "reason": "Reden",
                "reject": "Afwijzen",
-                "reject_desc": "Deze instantie zal geen berichten accepteren van de volgende instanties:",
-                "simple_policies": "Instantiespecifieke regels"
+                "reject_desc": "Deze instantie zal géén berichten accepteren van de volgende instanties:",
+                "simple_policies": "Instantie-specifieke regels"
            }
        },
        "staff": "Personeel"
@ -219,15 +221,15 @@
        "search": "Zoeken",
        "timeline": "Tijdlijn",
        "timelines": "Tijdlijnen",
-        "twkn": "Bekende Netwerk",
-        "twkn_timeline_description": "Berichten van het gehele netwerk",
+        "twkn": "Globale Netwerk",
+        "twkn_timeline_description": "Berichten van het globale netwerk",
        "user_search": "Gebruiker Zoeken",
        "who_to_follow": "Wie te volgen"
    },
    "notifications": {
        "broken_favorite": "Onbekend bericht, aan het zoeken…",
        "error": "Fout bij ophalen van meldingen: {0}",
-        "favorited_you": "vond je status leuk",
+        "favorited_you": "vond je bericht leuk",
        "follow_request": "wil je volgen",
        "followed_you": "volgt jou",
        "load_older": "Oudere meldingen laden",
@ -243,10 +245,10 @@
        "check_email": "Controleer je email inbox voor een link om je wachtwoord opnieuw in te stellen.",
        "forgot_password": "Wachtwoord vergeten?",
        "instruction": "Voer je email adres of gebruikersnaam in. We sturen je een link om je wachtwoord opnieuw in te stellen.",
-        "password_reset": "Wachtwoord opnieuw instellen",
-        "password_reset_disabled": "Wachtwoord reset is uitgeschakeld. Neem contact op met de beheerder van deze instantie.",
+        "password_reset": "Wachtwoord herstellen",
+        "password_reset_disabled": "Wachtwoordherstel is uitgeschakeld. Neem contact op met de beheerder van deze instantie.",
        "password_reset_required": "Je dient je wachtwoord opnieuw in te stellen om in te kunnen loggen.",
-        "password_reset_required_but_mailer_is_disabled": "Je dient je wachtwoord opnieuw in te stellen, maar wachtwoord reset is uitgeschakeld. Neem contact op met de beheerder van deze instantie.",
+        "password_reset_required_but_mailer_is_disabled": "Je dient je wachtwoord opnieuw in te stellen, maar wachtwoordherstel is uitgeschakeld. Neem contact op met de beheerder van deze instantie.",
        "placeholder": "Je email of gebruikersnaam",
        "return_home": "Terugkeren naar de home pagina",
        "too_many_requests": "Je hebt het maximaal aantal pogingen bereikt, probeer het later opnieuw."
@ -282,13 +284,13 @@
        "default": "Zojuist gearriveerd op de Zweinstein Hogeschool",
        "direct_warning_to_all": "Dit bericht zal zichtbaar zijn voor alle vermelde gebruikers.",
        "direct_warning_to_first_only": "Dit bericht zal alleen zichtbaar zijn voor de vermelde gebruikers aan het begin van het bericht.",
-        "empty_status_error": "Kan geen lege status zonder bijlagen plaatsen",
+        "empty_status_error": "Kan geen leeg bericht zonder bijlagen plaatsen",
        "media_description": "Mediaomschrijving",
        "media_description_error": "Kon media niet ophalen, probeer het opnieuw",
        "media_not_sensitive_warning": "Je hebt een Content Waarschuwing, maar de bijlagen zijn niet gemarkeerd als gevoelig!",
        "new_status": "Nieuw bericht plaatsen",
        "post": "Plaatsen",
-        "posting": "Plaatsen...",
+        "posting": "Aan het plaatsen",
        "preview": "Voorbeeld",
        "preview_empty": "Leeg",
        "scope": {
@ -302,7 +304,7 @@
            "local": "Dit bericht zal niet zichtbaar zijn op andere instanties",
            "private": "Dit bericht zal voor alleen je volgers zichtbaar zijn",
            "public": "Dit bericht zal voor iedereen zichtbaar zijn",
-            "unlisted": "Dit bericht zal niet zichtbaar zijn in de Openbare Tijdlijn en Het Gehele Netwerk"
+            "unlisted": "Dit bericht zal niet zichtbaar zijn in de Openbare Tijdlijn en Het Globale Netwerk"
        }
    },
    "registration": {
@ -359,11 +361,11 @@
        "added_alias": "Alias is toegevoegd.",
        "added_backup": "Nieuwe back-up is toegevoegd.",
        "allow_following_move": "Automatisch volgen toestaan wanneer een gevolgd account verhuist",
-        "always_show_post_button": "Altijd de zwevende Nieuw Bericht knop tonen",
+        "always_show_post_button": "Altijd de zwevende \"Bericht opstellen\"-knop tonen",
        "app_name": "App naam",
        "attachmentRadius": "Bijlagen",
        "attachments": "Bijlagen",
-        "autohide_floating_post_button": "Nieuw Bericht knop automatisch verbergen (mobiel)",
+        "autohide_floating_post_button": "\"Bericht opstellen\"-knop automatisch verbergen (mobiel)",
        "avatar": "Avatar",
        "avatarAltRadius": "Avatars (meldingen)",
        "avatarRadius": "Avatars",
@ -413,7 +415,7 @@
        "discoverable": "Sta toe dat dit account ontdekt kan worden in zoekresultaten en andere diensten",
        "domain_mutes": "Domeinen",
        "download_backup": "Downloaden",
-        "email_language": "Taal voor emails van de server",
+        "email_language": "Taal voor e-mails van de server",
        "emoji_reactions_on_timeline": "Toon emoji-reacties op de tijdlijn",
        "enable_web_push_notifications": "Web push meldingen inschakelen",
        "enter_current_password_to_confirm": "Voer je huidige wachtwoord in om je identiteit te bevestigen",
@ -559,7 +561,7 @@
        "pause_on_unfocused": "Streamen pauzeren wanneer de tab niet in focus is",
        "play_videos_in_modal": "Video's in een popup venster afspelen",
        "post_look_feel": "Berichten Look & Feel",
-        "post_status_content_type": "Standaard bericht  content type",
+        "post_status_content_type": "Standaard bericht content type",
        "posts": "Berichten",
        "preload_images": "Afbeeldingen vooraf laden",
        "presets": "Presets",
@ -577,6 +579,7 @@
        "remove_alias": "Deze alias verwijderen",
        "remove_backup": "Verwijderen",
        "render_mfm": "Misskey Markdown weergeven",
+        "render_mfm_on_hover": "MFM animaties afspelen bij zweven over bericht",
        "replies_in_timeline": "Antwoorden in tijdlijn",
        "reply_visibility_all": "Alle antwoorden tonen",
        "reply_visibility_following": "Enkel antwoorden tonen die aan mij of gevolgde gebruikers gericht zijn",
@ -777,10 +780,11 @@
        "token": "Token",
        "tooltipRadius": "Tooltips/alarmen",
        "tree_advanced": "Flexibelere navigatie toestaan in boom weergave",
+        "tree_fade_ancestors": "Ouders van huidige bericht met gedempte tekst tonen",
        "type_domains_to_mute": "Zoek domeinen om te negeren",
        "upload_a_photo": "Foto uploaden",
        "useStreamingApi": "Berichten en meldingen in real-time ontvangen",
-        "useStreamingApiWarning": "Iets experimenteels met berichten streamen uwu miss kun je beter uit laten ofzo",
+        "useStreamingApiWarning": "Iets experimenteels met berichten streamen uwu miss kun je beter uit laten ofzo?",
        "use_at_icon": "{'@'} symbool als icoon tonen in plaats van tekst",
        "use_contain_fit": "Bijlage in miniaturen niet bijsnijden",
        "use_one_click_nsfw": "Gevoelige bijlagen met slechts één klik openen",
@ -802,6 +806,7 @@
        "wordfilter": "Woordfilter"
    },
    "status": {
+        "ancestor_follow": "{numReplies} ander antwoord onder dit bericht tonen | {numReplies} andere antwoorden onder dit bericht tonen",
        "ancestor_follow_with_icon": "{icon} {text}",
        "attachment_stop_flash": "Flash speler stoppen",
        "bookmark": "Bladwijzer toevoegen",
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -36,6 +36,11 @@ export const defaultState = {
  muteBotStatuses: undefined, // instance default
  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
  hideAttachments: false,
  hideAttachmentsInConv: false,
  maxThumbnails: 16,
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -34,7 +34,8 @@ const defaultState = {
  hideWordFilteredPosts: false,
  hidePostStats: false,
  hideBotIndication: false,
-  hideSitename: false,
+  hideSiteFavicon: false,
+  hideSiteName: false,
  hideUserStats: false,
  muteBotStatuses: false,
  loginMethod: 'password',
@ -50,13 +51,15 @@ const defaultState = {
  scopeCopy: true,
  showFeaturesPanel: true,
  showInstanceSpecificPanel: false,
+  showNavShortcuts: true,
+  showWiderShortcuts: true,
  sidebarRight: false,
  subjectLineBehavior: 'email',
  theme: 'pleroma-dark',
  virtualScrolling: true,
  sensitiveByDefault: false,
  sensitiveIfSubject: true,
-  renderMisskeyMarkdown: false,
+  renderMisskeyMarkdown: true,
  renderMfmOnHover: false,
  conversationDisplay: 'linear',
  conversationTreeAdvanced: false,
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@ -49,7 +49,7 @@ const fetchAndUpdate = ({
  args['listId'] = listId
  args['tag'] = tag
  args['withMuted'] = !hideMutedPosts
-  if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
+  if (loggedIn && ['friends', 'public', 'publicAndExternal', 'bubble'].includes(timeline)) {
    args['replyVisibility'] = replyVisibility
  }

--- a/yarn.lock
+++ b/yarn.lock
@ -1085,6 +1085,11 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

+"@fortawesome/fontawesome-common-types@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz#c1095b1bbabf19f37f9ff0719db38d92a410bcfe"
+  integrity sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA==
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
  version "0.2.36"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
@ -1102,12 +1107,12 @@
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.3.0"

-"@fortawesome/free-regular-svg-icons@5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
-  integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
+"@fortawesome/free-regular-svg-icons@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz#9f04009098addcc11d0d185126f058ed042c3099"
+  integrity sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==
  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "6.1.2"

 "@fortawesome/free-solid-svg-icons@5.15.4":
  version "5.15.4"
Author	SHA1	Message	Date
FloatingGhost	1f2b059320	add language tags	2022-08-23 16:12:06 +01:00
floatingghost	2d85ee6a08	use-server-side-mfm (#133 ) Reviewed-on: AkkomaGang/pleroma-fe#133	2022-08-18 03:14:38 +00:00
floatingghost	e61228b031	use akkoma-specific source for MFM unless asked not to (#132 ) Reviewed-on: AkkomaGang/pleroma-fe#132	2022-08-17 09:34:50 +00:00
floatingghost	64fdde52f6	timeline panel nav (#131 ) Reviewed-on: AkkomaGang/pleroma-fe#131	2022-08-17 08:41:36 +00:00
eris	ca0b730605	Redo desktop nav, add options for site name and favicon (#83 ) Reviewed-on: AkkomaGang/pleroma-fe#83 Co-authored-by: eris <femmediscord@gmail.com> Co-committed-by: eris <femmediscord@gmail.com>	2022-08-14 23:24:59 +00:00
floatingghost	4dcca7cf53	somewhat fix scrolling behaviour (#127 ) Reviewed-on: AkkomaGang/pleroma-fe#127	2022-08-11 17:25:43 +00:00
FloatingGhost	cbf883ab1e	fix "who reacted" emoji display fixes #80	2022-08-11 18:14:05 +01:00
Weblate	edf36d28ca	Translated using Weblate (English) Currently translated at 99.5% (851 of 855 strings) Co-authored-by: Weblate Admin <hannah.ward9001@gmail.com> Translate-URL: http://translate.akkoma.dev/projects/akkoma/pleroma-fe/en/ Translation: Pleroma fe/pleroma-fe	2022-08-11 10:10:38 +00:00
Weblate	c554ced3a4	Merge branch 'origin/develop' into Weblate.	2022-08-11 10:08:13 +00:00
floatingghost	75a3ab343b	Merge pull request 'Flip order of accommodation for (#115 )' (#118 ) from Mergan/pleroma-fe:emoji-picker into develop Reviewed-on: AkkomaGang/pleroma-fe#118	2022-08-11 10:08:12 +00:00
Weblate	617773d287	Merge branch 'origin/develop' into Weblate.	2022-08-11 09:21:20 +00:00
FloatingGhost	9ede66fcc0	enable misskey markdown by default fixes #67	2022-08-11 10:21:00 +01:00
Weblate	f969dd6ad2	Translated using Weblate (Dutch) Currently translated at 100.0% (855 of 855 strings) Translated using Weblate (Dutch) Currently translated at 100.0% (853 of 853 strings) Translated using Weblate (Dutch) Currently translated at 100.0% (852 of 852 strings) Translated using Weblate (Dutch) Currently translated at 100.0% (852 of 852 strings) Co-authored-by: Fristi <fristi@subcon.town> Co-authored-by: Weblate <noreply@weblate.org> Translate-URL: http://translate.akkoma.dev/projects/akkoma/pleroma-fe/nl/ Translation: Pleroma fe/pleroma-fe	2022-08-11 09:04:25 +00:00
Weblate	468fe27565	Translated using Weblate (Japanese (ja_PEDANTIC)) Currently translated at 82.9% (709 of 855 strings) Co-authored-by: Weblate <noreply@weblate.org> Co-authored-by: Weblate Admin <hannah.ward9001@gmail.com> Translate-URL: http://translate.akkoma.dev/projects/akkoma/pleroma-fe/ja_PEDANTIC/ Translation: Pleroma fe/pleroma-fe	2022-08-11 09:04:25 +00:00
Weblate	251a1b13a3	Translated using Weblate (Catalan) Currently translated at 100.0% (855 of 855 strings) Translated using Weblate (Catalan) Currently translated at 100.0% (855 of 855 strings) Translated using Weblate (Catalan) Currently translated at 96.9% (827 of 853 strings) Translated using Weblate (Catalan) Currently translated at 97.0% (827 of 852 strings) Co-authored-by: Weblate <noreply@weblate.org> Co-authored-by: sola <spla@mastodont.cat> Translate-URL: http://translate.akkoma.dev/projects/akkoma/pleroma-fe/ca/ Translation: Pleroma fe/pleroma-fe	2022-08-11 09:04:25 +00:00
floatingghost	94af72fd62	Merge pull request 'Fix reply filtering on bubble timeline' (#125 ) from eris/pleroma-fe:bubble-filter-fix into develop Reviewed-on: AkkomaGang/pleroma-fe#125	2022-08-11 09:04:23 +00:00
eris	e5ca36a68c	Fix reply filtering on bubble timeline	2022-08-10 00:30:13 +00:00
David	d69df0e906	Flip order of accommodation for (#115 )	2022-08-05 17:01:18 -07:00