Merge branch 'navigation-update' into shigusegubu-vue3

* navigation-update: lint limit amount of pins on desktop to 6 (for now) band-aid to prevent misclics on logout fixes, clear cache on logout let mobile users customize top bar as well fixes + fixes for anon users navigation refactored, used in mobile nav as well show pinned lists between timelines and rest you can now pin lists it works more or less well now ability to pin items in navigation menu, initial draft version add a todo for future server side storage support for collections + fixes update link in update notification to be a better one fixes more prefs storage work + move dontShowUpdateNotifs to prefs initial prefs storage work
2022-08-12 01:28:37 +03:00 · 2022-08-12 01:28:37 +03:00 · d632f3ab76
commit d632f3ab76
parent fa4c827df6 80600137d1
35 changed files with 914 additions and 278 deletions
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -117,4 +117,8 @@
      text-align: right;
    }
  }
+
+  .spacer {
+    width: 1em;
+  }
 }
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -61,6 +61,7 @@
            :title="$t('nav.administration')"
          />
        </a>
+        <span class="spacer" />
        <button
          v-if="currentUser"
          class="button-unstyled nav-icon"
--- a/src/components/lists_menu/lists_menu_content.js
+++ b/src/components/lists_menu/lists_menu_content.js
@ -1,28 +1,26 @@
 import { mapState } from 'vuex'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome
-} from '@fortawesome/free-solid-svg-icons'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'

-library.add(
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome
-)
+export const getListEntries = state => state.lists.allLists.map(list => ({
+  name: 'list-' + list.id,
+  routeObject: { name: 'lists-timeline', params: { id: list.id } },
+  labelRaw: list.title,
+  iconLetter: list.title[0]
+}))

-const ListsMenuContent = {
+export const ListsMenuContent = {
+  props: [
+    'showPin'
+  ],
  created () {
    this.$store.dispatch('startFetchingLists')
  },
+  components: {
+    NavigationEntry
+  },
  computed: {
    ...mapState({
-      lists: state => state.lists.allLists,
+      lists: getListEntries,
      currentUser: state => state.users.currentUser,
      privateMode: state => state.instance.private,
      federating: state => state.instance.federating
--- a/src/components/lists_menu/lists_menu_content.vue
+++ b/src/components/lists_menu/lists_menu_content.vue
@ -1,16 +1,11 @@
 <template>
  <ul>
-    <li
-      v-for="list in lists.slice().reverse()"
-      :key="list.id"
-    >
-      <router-link
-        class="menu-item"
-        :to="{ name: 'lists-timeline', params: { id: list.id } }"
-      >
-        {{ list.title }}
-      </router-link>
-    </li>
+    <NavigationEntry
+      v-for="item in lists"
+      :key="item.name"
+      :show-pin="showPin"
+      :item="item"
+    />
  </ul>
 </template>

--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@ -2,6 +2,7 @@ import SideDrawer from '../side_drawer/side_drawer.vue'
 import Notifications from '../notifications/notifications.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
+import NavigationPins from 'src/components/navigation/navigation_pins.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@ -19,7 +20,8 @@ library.add(
 const MobileNav = {
  components: {
    SideDrawer,
-    Notifications
+    Notifications,
+    NavigationPins
  },
  data: () => ({
    notificationsCloseGesture: undefined,
@ -47,7 +49,10 @@ const MobileNav = {
    isChat () {
      return this.$route.name === 'chat'
    },
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount']),
+    chatsPinned () {
+      return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
+    }
  },
  methods: {
    toggleMobileSidebar () {
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -17,20 +17,12 @@
            icon="bars"
          />
          <div
-            v-if="unreadChatCount"
+            v-if="unreadChatCount && !chatsPinned"
            class="alert-dot"
          />
        </button>
-        <router-link
-          v-if="!hideSitename"
-          class="site-name"
-          :to="{ name: 'root' }"
-          active-class="home"
-        >
-          {{ sitename }}
-        </router-link>
-      </div>
-      <div class="item right">
+        <NavigationPins class="pins" />
+      </div> <div class="item right">
        <button
          v-if="currentUser"
          class="button-unstyled mobile-nav-button"
@ -94,6 +86,7 @@
    grid-template-columns: 2fr auto;
    width: 100%;
    box-sizing: border-box;
+
    a {
      color: var(--topBarLink, $fallback--link);
    }
@ -178,13 +171,20 @@
    }
  }

+  .pins {
+    flex: 1;
+
+    .pinned-item {
+      flex-grow: 1;
+    }
+  }
+
  .mobile-notifications {
    margin-top: 50px;
    width: 100vw;
    height: calc(100vh - var(--navbar-height));
    overflow-x: hidden;
    overflow-y: scroll;
-
    color: $fallback--text;
    color: var(--text, $fallback--text);
    background-color: $fallback--bg;
@ -194,14 +194,17 @@
      padding: 0;
      border-radius: 0;
      box-shadow: none;
+
      .panel {
        border-radius: 0;
        margin: 0;
        box-shadow: none;
      }
-      .panel:after {
+
+      .panel::after {
        border-radius: 0;
      }
+
      .panel .panel-heading {
        border-radius: 0;
        box-shadow: none;
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -1,6 +1,9 @@
-import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
-import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
+import { getListEntries, ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
+import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
+import { filterNavigation } from 'src/components/navigation/filter.js'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
+import NavigationPins from 'src/components/navigation/navigation_pins.vue'

 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@ -30,21 +33,24 @@ library.add(
  faStream,
  faList
 )
-
 const NavPanel = {
+  props: ['forceExpand'],
  created () {
    if (this.currentUser && this.currentUser.locked) {
      this.$store.dispatch('startFetchingFollowRequests')
    }
  },
  components: {
-    TimelineMenuContent,
-    ListsMenuContent
+    ListsMenuContent,
+    NavigationEntry,
+    NavigationPins
  },
  data () {
    return {
      showTimelines: false,
-      showLists: false
+      showLists: false,
+      timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
+      rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
    }
  },
  methods: {
@ -53,19 +59,60 @@ const NavPanel = {
    },
    toggleLists () {
      this.showLists = !this.showLists
+    },
+    toggleCollapse () {
+      this.$store.commit('setPreference', { path: 'simple.collapseNav', value: !this.collapsed })
+      this.$store.dispatch('pushServerSideStorage')
+    },
+    isPinned (item) {
+      return this.pinnedItems.has(item)
+    },
+    togglePin (item) {
+      if (this.isPinned(item)) {
+        this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
+      } else {
+        this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
+      }
+      this.$store.dispatch('pushServerSideStorage')
    }
  },
  computed: {
-    listsNavigation () {
-      return this.$store.getters.mergedConfig.listsNavigation
-    },
    ...mapState({
+      lists: getListEntries,
      currentUser: state => state.users.currentUser,
      followRequestCount: state => state.api.followRequests.length,
      privateMode: state => state.instance.private,
      federating: state => state.instance.federating,
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
+      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
+      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
    }),
+    timelinesItems () {
+      return filterNavigation(
+        Object
+          .entries({ ...TIMELINES })
+          .map(([k, v]) => ({ ...v, name: k })),
+        {
+          hasChats: this.pleromaChatMessagesAvailable,
+          isFederating: this.federating,
+          isPrivate: this.privateMode,
+          currentUser: this.currentUser
+        }
+      )
+    },
+    rootItems () {
+      return filterNavigation(
+        Object
+          .entries({ ...ROOT_ITEMS })
+          .map(([k, v]) => ({ ...v, name: k })),
+        {
+          hasChats: this.pleromaChatMessagesAvailable,
+          isFederating: this.federating,
+          isPrivate: this.privateMode,
+          currentUser: this.currentUser
+        }
+      )
+    },
    ...mapGetters(['unreadChatCount'])
  }
 }
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -1,7 +1,27 @@
 <template>
  <div class="NavPanel">
    <div class="panel panel-default">
-      <ul>
+      <div
+        v-if="!forceExpand"
+        class="panel-heading"
+      >
+        <NavigationPins :limit="6" />
+        <div class="spacer" />
+        <button
+          class="button-unstyled"
+          @click="toggleCollapse"
+        >
+          <FAIcon
+            class="timelines-chevron"
+            fixed-width
+            :icon="collapsed ? 'chevron-down' : 'chevron-up'"
+          />
+        </button>
+      </div>
+      <ul
+        v-if="!collapsed || forceExpand"
+        class="panel-body"
+      >
        <li v-if="currentUser || !privateMode">
          <button
            class="button-unstyled menu-item"
@ -22,114 +42,58 @@
            v-show="showTimelines"
            class="timelines-background"
          >
-            <TimelineMenuContent class="timelines" />
+            <ul class="timelines">
+              <NavigationEntry
+                v-for="item in timelinesItems"
+                :key="item.name"
+                :show-pin="true"
+                :item="item"
+              />
+            </ul>
          </div>
        </li>
-        <li v-if="currentUser && listsNavigation">
+        <li v-if="currentUser">
          <button
            class="button-unstyled menu-item"
            @click="toggleLists"
          >
-            <router-link
-              :to="{ name: 'lists' }"
-              @click.stop
-            >
-              <FAIcon
-                fixed-width
-                class="fa-scale-110"
-                icon="list"
-              />{{ $t("nav.lists") }}
-            </router-link>
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="list"
+            />{{ $t("nav.lists") }}
            <FAIcon
              class="timelines-chevron"
              fixed-width
              :icon="showLists ? 'chevron-up' : 'chevron-down'"
            />
+            <router-link
+              :to="{ name: 'lists' }"
+              @click.stop
+            >
+              <FAIcon
+                class="timelines-chevron"
+                fixed-width
+                icon="wrench"
+              />
+            </router-link>
          </button>
          <div
            v-show="showLists"
            class="timelines-background"
          >
-            <ListsMenuContent class="timelines" />
+            <ListsMenuContent
+              :show-pin="true"
+              class="timelines"
+            />
          </div>
        </li>
-        <li v-if="currentUser && !listsNavigation">
-          <router-link
-            :to="{ name: 'lists' }"
-            @click.stop
-          >
-            <button
-              class="button-unstyled menu-item"
-              @click="toggleLists"
-            >
-              <FAIcon
-                fixed-width
-                class="fa-scale-110"
-                icon="list"
-              />{{ $t("nav.lists") }}
-            </button>
-          </router-link>
-        </li>
-        <li v-if="currentUser">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="bell"
-            />{{ $t("nav.interactions") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser && pleromaChatMessagesAvailable">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
-          >
-            <div
-              v-if="unreadChatCount"
-              class="badge badge-notification"
-            >
-              {{ unreadChatCount }}
-            </div>
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="comments"
-            />{{ $t("nav.chats") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser && currentUser.locked">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'friend-requests' }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="user-plus"
-            />{{ $t("nav.friend_requests") }}
-            <span
-              v-if="followRequestCount > 0"
-              class="badge badge-notification"
-            >
-              {{ followRequestCount }}
-            </span>
-          </router-link>
-        </li>
-        <li>
-          <router-link
-            class="menu-item"
-            :to="{ name: 'about' }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="info-circle"
-            />{{ $t("nav.about") }}
-          </router-link>
-        </li>
+        <NavigationEntry
+          v-for="item in rootItems"
+          :key="item.name"
+          :show-pin="true"
+          :item="item"
+        />
      </ul>
    </div>
  </div>
@ -241,10 +205,5 @@
    margin-right: 0.8em;
  }

-  .badge {
-    position: absolute;
-    right: 0.6rem;
-    top: 1.25em;
-  }
 }
 </style>
--- a/src/components/navigation/filter.js
+++ b/src/components/navigation/filter.js
@ -0,0 +1,11 @@
+export const filterNavigation = (list = [], { hasChats, isFederating, isPrivate, currentUser }) => {
+  return list.filter(({ criteria, anon, anonRoute }) => {
+    const set = new Set(criteria || [])
+    if (!isFederating && set.has('federating')) return false
+    if (isPrivate && set.has('!private')) return false
+    if (!currentUser && !(anon || anonRoute)) return false
+    if ((!currentUser || !currentUser.locked) && set.has('lockedUser')) return false
+    if (!hasChats && set.has('chats')) return false
+    return true
+  })
+}
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@ -0,0 +1,60 @@
+export const TIMELINES = {
+  home: {
+    route: 'friends',
+    icon: 'home',
+    label: 'nav.home_timeline',
+    criteria: ['!private']
+  },
+  public: {
+    route: 'public-timeline',
+    anon: true,
+    icon: 'users',
+    label: 'nav.public_tl',
+    criteria: ['!private']
+  },
+  twkn: {
+    route: 'public-external-timeline',
+    anon: true,
+    icon: 'globe',
+    label: 'nav.twkn',
+    criteria: ['!private', 'federating']
+  },
+  bookmarks: {
+    route: 'bookmarks',
+    icon: 'bookmark',
+    label: 'nav.bookmarks'
+  },
+  dms: {
+    route: 'dms',
+    icon: 'envelope',
+    label: 'nav.dms'
+  }
+}
+
+export const ROOT_ITEMS = {
+  interactions: {
+    route: 'interactions',
+    icon: 'bell',
+    label: 'nav.interactions'
+  },
+  chats: {
+    route: 'chats',
+    icon: 'comments',
+    label: 'nav.chats',
+    badgeGetter: 'unreadChatCount',
+    criteria: ['chats']
+  },
+  friendRequests: {
+    route: 'friend-requests',
+    icon: 'user-plus',
+    label: 'nav.friend_requests',
+    criteria: ['lockedUser'],
+    badgeGetter: 'followRequestCount'
+  },
+  about: {
+    route: 'about',
+    anon: true,
+    icon: 'info-circle',
+    label: 'nav.about'
+  }
+}
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@ -0,0 +1,33 @@
+import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faThumbtack)
+
+const NavigationEntry = {
+  props: ['item', 'showPin'],
+  methods: {
+    isPinned (value) {
+      return this.pinnedItems.has(value)
+    },
+    togglePin (value) {
+      if (this.isPinned(value)) {
+        this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value })
+      } else {
+        this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value })
+      }
+      this.$store.dispatch('pushServerSideStorage')
+    }
+  },
+  computed: {
+    getters () {
+      return this.$store.getters
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
+    })
+  }
+}
+
+export default NavigationEntry
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@ -0,0 +1,96 @@
+<template>
+  <li class="NavigationEntry">
+    <router-link
+      class="menu-item"
+      :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
+    >
+      <FAIcon
+        v-if="item.icon"
+        fixed-width
+        class="fa-scale-110"
+        :icon="item.icon"
+      />
+      <span
+        v-if="item.iconLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ item.iconLetter }}
+      </span>{{ item.labelRaw || $t(item.label) }}
+      <button
+        type="button"
+        class="button-unstyled"
+        @click.stop.prevent="togglePin(item.name)"
+      >
+        <FAIcon
+          v-if="showPin && currentUser"
+          fixed-width
+          class="fa-scale-110"
+          :class="{ 'veryfaint': !isPinned(item.name) }"
+          :transform="!isPinned(item.name) ? 'rotate-45' : ''"
+          icon="thumbtack"
+        />
+        <div
+          v-if="item.badgeGetter && getters[item.badgeGetter]"
+          class="badge badge-notification"
+        >
+          {{ getters[item.badgeGetter] }}
+        </div>
+      </button>
+    </router-link>
+  </li>
+</template>
+
+<script src="./navigation_entry.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.NavigationEntry {
+  .fa-scale-110 {
+    margin-right: 0.8em;
+  }
+
+  .badge {
+    position: absolute;
+    right: 0.6rem;
+    top: 1.25em;
+  }
+
+  .menu-item {
+    display: block;
+    box-sizing: border-box;
+    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;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuText, $fallback--link);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+    }
+
+    &.router-link-active {
+      font-weight: bolder;
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--text;
+      color: var(--selectedMenuText, $fallback--text);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@ -0,0 +1,76 @@
+import { getListEntries } from '../lists_menu/lists_menu_content.vue'
+import { mapState } from 'vuex'
+import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
+import { filterNavigation } from 'src/components/navigation/filter.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faComments,
+  faBell,
+  faInfoCircle,
+  faStream,
+  faList
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faComments,
+  faBell,
+  faInfoCircle,
+  faStream,
+  faList
+)
+const NavPanel = {
+  props: ['limit'],
+  computed: {
+    getters () {
+      return this.$store.getters
+    },
+    ...mapState({
+      lists: getListEntries,
+      currentUser: state => state.users.currentUser,
+      followRequestCount: state => state.api.followRequests.length,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating,
+      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
+      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
+    }),
+    pinnedList () {
+      if (!this.currentUser) {
+        return [
+          { ...TIMELINES.public, name: 'public' },
+          { ...TIMELINES.twkn, name: 'twkn' },
+          { ...ROOT_ITEMS.about, name: 'about' }
+        ]
+      }
+      return filterNavigation(
+        [
+          ...Object
+            .entries({ ...TIMELINES })
+            .filter(([k]) => this.pinnedItems.has(k))
+            .map(([k, v]) => ({ ...v, name: k })),
+          ...this.lists.filter((k) => this.pinnedItems.has(k.name)),
+          ...Object
+            .entries({ ...ROOT_ITEMS })
+            .filter(([k]) => this.pinnedItems.has(k))
+            .map(([k, v]) => ({ ...v, name: k }))
+        ],
+        {
+          hasChats: this.pleromaChatMessagesAvailable,
+          isFederating: this.federating,
+          isPrivate: this.privateMode,
+          currentUser: this.currentUser
+        }
+      ).slice(0, this.limit)
+    }
+  }
+}
+
+export default NavPanel
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@ -0,0 +1,67 @@
+<template>
+  <span class="NavigationPins">
+    <router-link
+      v-for="item in pinnedList"
+      :key="item.name"
+      class="pinned-item"
+      :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
+    >
+      <FAIcon
+        v-if="item.icon"
+        fixed-width
+        :icon="item.icon"
+      />
+      <span
+        v-if="item.iconLetter"
+        class="iconLetter fa-scale-110 fa-old-padding"
+      >{{ item.iconLetter }}</span>
+      <div
+        v-if="item.badgeGetter && getters[item.badgeGetter]"
+        class="alert-dot"
+      />
+    </router-link>
+  </span>
+</template>
+
+<script src="./navigation_pins.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.NavigationPins {
+  display: flex;
+  overflow: hidden;
+
+  .alert-dot {
+    border-radius: 100%;
+    height: 0.5em;
+    width: 0.5em;
+    position: absolute;
+    right: calc(50% - 0.25em);
+    top: calc(50% - 0.25em);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
+  .pinned-item {
+    position: relative;
+    flex: 0 0 3em;
+    min-width: 2em;
+    text-align: center;
+
+    & .svg-inline--fa,
+    & .iconLetter {
+      margin: 0;
+    }
+
+    &.router-link-active {
+      & .svg-inline--fa,
+      & .iconLetter {
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+      }
+    }
+  }
+}
+</style>
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@ -47,6 +47,8 @@
          class="cancel-icon fa-scale-110 fa-old-padding"
        />
      </button>
+      <span class="spacer" />
+      <span class="spacer" />
    </template>
  </div>
 </template>
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -124,11 +124,6 @@
            {{ $t('settings.hide_shoutbox') }}
          </BooleanSetting>
        </li>
-        <li>
-          <BooleanSetting path="listsNavigation">
-            {{ $t('settings.lists_navigation') }}
-          </BooleanSetting>
-        </li>
        <li>
          <h3>{{ $t('settings.columns') }}</h3>
        </li>
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@ -15,6 +15,7 @@ import {
  faTachometerAlt,
  faCog,
  faInfoCircle,
+  faCompass,
  faList
 } from '@fortawesome/free-solid-svg-icons'

@ -30,6 +31,7 @@ library.add(
  faTachometerAlt,
  faCog,
  faInfoCircle,
+  faCompass,
  faList
 )

--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -191,6 +191,18 @@
            /> {{ $t("nav.administration") }}
          </a>
        </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link :to="{ name: 'edit-navigation' }">
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="compass"
+            /> {{ $t("nav.edit_nav_mobile") }}
+          </router-link>
+        </li>
        <li
          v-if="currentUser"
          @click="toggleDrawer"
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -28,6 +28,7 @@ const Timeline = {
    'footerSlipgate' // reference to an element where we should put our footer
  ],
  data () {
+    console.log(this.timelineName)
    return {
      paused: false,
      unfocused: false,
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -1,7 +1,10 @@
 <template>
  <div :class="['Timeline', classes.root]">
    <div :class="classes.header">
-      <TimelineMenu v-if="!embedded" />
+      <TimelineMenu
+        v-if="!embedded"
+        :timeline-name="timelineName"
+      />
      <button
        v-if="showLoadButton"
        class="button-default loadmore-button"
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@ -1,6 +1,8 @@
 import Popover from '../popover/popover.vue'
-import TimelineMenuContent from './timeline_menu_content.vue'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
+import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { TIMELINES } from 'src/components/navigation/navigation.js'
 import {
  faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
@ -22,11 +24,13 @@ export const timelineNames = () => {
 const TimelineMenu = {
  components: {
    Popover,
-    TimelineMenuContent
+    NavigationEntry,
+    ListsMenuContent
  },
  data () {
    return {
-      isOpen: false
+      isOpen: false,
+      timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k }))
    }
  },
  created () {
@ -34,6 +38,12 @@ const TimelineMenu = {
      this.$store.dispatch('setLastTimeline', this.$route.name)
    }
  },
+  computed: {
+    useListsMenu () {
+      const route = this.$route.name
+      return route === 'lists-timeline'
+    }
+  },
  methods: {
    openMenu () {
      // $nextTick is too fast, animation won't play back but
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@ -10,7 +10,19 @@
    @close="() => isOpen = false"
  >
    <template #content>
-      <TimelineMenuContent />
+      <ListsMenuContent
+        v-if="useListsMenu"
+        :show-pin="false"
+        class="timelines"
+      />
+      <ul v-else>
+        <NavigationEntry
+          v-for="item in timelinesList"
+          :key="item.name"
+          :show-pin="false"
+          :item="item"
+        />
+      </ul>
    </template>
    <template #trigger>
      <span class="button-unstyled title timeline-menu-title">
@ -138,8 +150,7 @@
      background-color: $fallback--lightBg;
      background-color: var(--selectedMenu, $fallback--lightBg);
      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint);
      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
      --lightText: var(--selectedMenuLightText, $fallback--lightText);
      --icon: var(--selectedMenuIcon, $fallback--icon);
--- a/src/components/timeline_menu/timeline_menu_content.js
+++ b/src/components/timeline_menu/timeline_menu_content.js
@ -1,29 +0,0 @@
-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
@ -1,66 +0,0 @@
-<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/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@ -38,7 +38,7 @@ const UpdateNotification = {
      return !this.$store.state.instance.disableUpdateNotification &&
        this.$store.state.users.currentUser &&
        this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
-        !this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs
+        !this.$store.state.serverSideStorage.prefsStorage.simple.dontShowUpdateNotifs
    }
  },
  methods: {
@ -48,7 +48,7 @@ const UpdateNotification = {
    neverShowAgain () {
      this.toggleShow()
      this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
-      this.$store.commit('setFlag', { flag: 'dontShowUpdateNotifs', value: 1 })
+      this.$store.commit('setPreference', { path: 'simple.dontShowUpdateNotifs', value: true })
      this.$store.dispatch('pushServerSideStorage')
    },
    dismiss () {
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@ -60,7 +60,7 @@
                  <template #linkToArtist>
                    <a
                      target="_blank"
-                      href="https://post.ebin.club/pipivovott"
+                      href="https://post.ebin.club/users/pipivovott"
                    >pipivovott</a>
                  </template>
                </i18n-t>