From 6df99133548fb209bf365b77665931be477f0a30 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Aug 2022 14:30:58 +0300
Subject: ability to pin items in navigation menu, initial draft version

---
 src/components/nav_panel/nav_panel.js | 111 ++++++++++++++++++++++++++++++++--
 1 file changed, 106 insertions(+), 5 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index abeff6bf..758f9af4 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -31,6 +31,66 @@ library.add(
   faList
 )
 
+export const TIMELINES = {
+  home: {
+    route: 'friends',
+    anonRoute: 'public-timeline',
+    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'
+  },
+  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'
+  }
+}
+
 const NavPanel = {
   created () {
     if (this.currentUser && this.currentUser.locked) {
@@ -43,8 +103,11 @@ const NavPanel = {
   },
   data () {
     return {
+      collapsed: false,
       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 +116,57 @@ const NavPanel = {
     },
     toggleLists () {
       this.showLists = !this.showLists
+    },
+    toggleCollapse () {
+      this.collapsed = !this.collapsed
+    },
+    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 })
+      }
     }
   },
   computed: {
-    listsNavigation () {
-      return this.$store.getters.mergedConfig.listsNavigation
-    },
     ...mapState({
       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)
     }),
+    rootItems () {
+      return Object
+        .entries({ ...ROOT_ITEMS })
+        .map(([k, v]) => ({ ...v, name: k }))
+        .filter(({ criteria, anon, anonRoute }) => {
+          const set = new Set(criteria || [])
+          if (!this.federating && set.has('federating')) return false
+          if (this.private && set.has('!private')) return false
+          if (!this.currentUser && !(anon || anonRoute)) return false
+          if ((!this.currentUser || !this.currentUser.locked) && set.has('lockedUser')) return false
+          return true
+        })
+    },
+    pinnedList () {
+      return Object
+        .entries({ ...TIMELINES, ...ROOT_ITEMS })
+        .filter(([k]) => this.pinnedItems.has(k))
+        .map(([k, v]) => ({ ...v, name: k }))
+        .filter(({ criteria, anon, anonRoute }) => {
+          const set = new Set(criteria || [])
+          if (!this.federating && set.has('federating')) return false
+          if (this.private && set.has('!private')) return false
+          if (!this.currentUser && !(anon || anonRoute)) return false
+          if (this.currentUser && !this.currentUser.locked && set.has('locked')) return false
+          return true
+        })
+    },
     ...mapGetters(['unreadChatCount'])
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 04f8c2d29d0e9c5e0341b067e5e783b90c95064b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Aug 2022 18:06:28 +0300
Subject: it works more or less well now

---
 src/components/nav_panel/nav_panel.js |  8 ++++--
 src/modules/serverSideStorage.js      | 54 +++++++++++++++++++++++++++--------
 2 files changed, 47 insertions(+), 15 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 758f9af4..7cc3122d 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -103,7 +103,6 @@ const NavPanel = {
   },
   data () {
     return {
-      collapsed: false,
       showTimelines: false,
       showLists: false,
       timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
@@ -118,7 +117,8 @@ const NavPanel = {
       this.showLists = !this.showLists
     },
     toggleCollapse () {
-      this.collapsed = !this.collapsed
+      this.$store.commit('setPreference', { path: 'simple.collapseNav', value: !this.collapsed })
+      this.$store.dispatch('pushServerSideStorage')
     },
     isPinned (item) {
       return this.pinnedItems.has(item)
@@ -129,6 +129,7 @@ const NavPanel = {
       } else {
         this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
       }
+      this.$store.dispatch('pushServerSideStorage')
     }
   },
   computed: {
@@ -138,7 +139,8 @@ const NavPanel = {
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
-      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
+      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
+      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
     }),
     rootItems () {
       return Object
diff --git a/src/modules/serverSideStorage.js b/src/modules/serverSideStorage.js
index c4c5ebba..d95fbb8a 100644
--- a/src/modules/serverSideStorage.js
+++ b/src/modules/serverSideStorage.js
@@ -22,7 +22,8 @@ export const defaultState = {
   prefsStorage: {
     _journal: [],
     simple: {
-      dontShowUpdateNotifs: false
+      dontShowUpdateNotifs: false,
+      collapseNav: false
     },
     collections: {
       pinnedNavItems: ['home', 'dms', 'chats', 'about']
@@ -58,6 +59,23 @@ const _wrapData = (data) => ({
 
 const _checkValidity = (data) => data._timestamp > 0 && data._version > 0
 
+const _verifyPrefs = (state) => {
+  state.prefsStorage = state.prefsStorage || {
+    simple: {},
+    collections: {}
+  }
+  Object.entries(defaultState.prefsStorage.simple).forEach(([k, v]) => {
+    if (typeof v === 'number' || typeof v === 'boolean') return
+    console.warn(`Preference simple.${k} as invalid type, reinitializing`)
+    set(state.prefsStorage.simple, k, defaultState.prefsStorage.simple[k])
+  })
+  Object.entries(defaultState.prefsStorage.collections).forEach(([k, v]) => {
+    if (Array.isArray(v)) return
+    console.warn(`Preference collections.${k} as invalid type, reinitializing`)
+    set(state.prefsStorage.collections, k, defaultState.prefsStorage.collections[k])
+  })
+}
+
 export const _getRecentData = (cache, live) => {
   const result = { recent: null, stale: null, needUpload: false }
   const cacheValid = _checkValidity(cache || {})
@@ -149,7 +167,8 @@ export const _mergePrefs = (recent, stale, allFlagKeys) => {
    */
   const resultOutput = { ...recentData }
   const totalJournal = _mergeJournal(staleJournal, recentJournal)
-  totalJournal.forEach(({ path, timestamp, operation, args }) => {
+  totalJournal.forEach(({ path, timestamp, operation, command, args }) => {
+    operation = operation || command
     if (path.startsWith('_')) {
       console.error(`journal contains entry to edit internal (starts with _) field '${path}', something is incorrect here, ignoring.`)
       return
@@ -161,9 +180,12 @@ export const _mergePrefs = (recent, stale, allFlagKeys) => {
       case 'addToCollection':
         set(resultOutput, path, Array.from(new Set(get(resultOutput, path)).add(args[0])))
         break
-      case 'removeFromCollection':
-        set(resultOutput, path, Array.from(new Set(get(resultOutput, path)).remove(args[0])))
+      case 'removeFromCollection': {
+        const newSet = new Set(get(resultOutput, path))
+        newSet.delete(args[0])
+        set(resultOutput, path, Array.from(newSet))
         break
+      }
       case 'reorderCollection': {
         const [value, movement] = args
         set(resultOutput, path, _moveItemInArray(get(resultOutput, path), value, movement))
@@ -269,6 +291,8 @@ export const mutations = {
       // Merge the flags
       console.debug('Merging the data...')
       totalFlags = _mergeFlags(recent, stale, allFlagKeys)
+      _verifyPrefs(recent)
+      _verifyPrefs(stale)
       totalPrefs = _mergePrefs(recent.prefsStorage, stale.prefsStorage)
     } else {
       totalFlags = recent.flagStorage
@@ -301,8 +325,9 @@ export const mutations = {
     set(state.prefsStorage, path, value)
     state.prefsStorage._journal = [
       ...state.prefsStorage._journal,
-      { command: 'set', path, args: [value], timestamp: Date.now() }
+      { operation: 'set', path, args: [value], timestamp: Date.now() }
     ]
+    state.dirty = true
   },
   addCollectionPreference (state, { path, value }) {
     if (path.startsWith('_')) {
@@ -311,11 +336,12 @@ export const mutations = {
     }
     const collection = new Set(get(state.prefsStorage, path))
     collection.add(value)
-    set(state.prefsStorage, path, collection)
+    set(state.prefsStorage, path, [...collection])
     state.prefsStorage._journal = [
       ...state.prefsStorage._journal,
-      { command: 'addToCollection', path, args: [value], timestamp: Date.now() }
+      { operation: 'addToCollection', path, args: [value], timestamp: Date.now() }
     ]
+    state.dirty = true
   },
   removeCollectionPreference (state, { path, value }) {
     if (path.startsWith('_')) {
@@ -324,11 +350,12 @@ export const mutations = {
     }
     const collection = new Set(get(state.prefsStorage, path))
     collection.delete(value)
-    set(state.prefsStorage, path, collection)
+    set(state.prefsStorage, path, [...collection])
     state.prefsStorage._journal = [
       ...state.prefsStorage._journal,
-      { command: 'removeFromCollection', path, args: [value], timestamp: Date.now() }
+      { operation: 'removeFromCollection', path, args: [value], timestamp: Date.now() }
     ]
+    state.dirty = true
   },
   reorderCollectionPreference (state, { path, value, movement }) {
     if (path.startsWith('_')) {
@@ -340,8 +367,9 @@ export const mutations = {
     set(state.prefsStorage, path, newCollection)
     state.prefsStorage._journal = [
       ...state.prefsStorage._journal,
-      { command: 'arrangeCollection', path, args: [value], timestamp: Date.now() }
+      { operation: 'arrangeCollection', path, args: [value], timestamp: Date.now() }
     ]
+    state.dirty = true
   },
   updateCache (state) {
     state.prefsStorage._journal = _mergeJournal(state.prefsStorage._journal)
@@ -365,8 +393,10 @@ const serverSideStorage = {
       const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } }
       rootState.api.backendInteractor
         .updateProfile({ params })
-        .then((user) => commit('setServerSideStorage', user))
-      state.dirty = false
+        .then((user) => {
+          commit('setServerSideStorage', user)
+          state.dirty = false
+        })
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 77127e2a588abb5bf329506ff7e006021b086e90 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Aug 2022 21:00:27 +0300
Subject: you can now pin lists

---
 src/App.scss                                       |  15 ++-
 src/components/lists_menu/lists_menu_content.js    |  32 +++---
 src/components/lists_menu/lists_menu_content.vue   |  16 +--
 src/components/nav_panel/nav_panel.js              | 123 ++++++---------------
 src/components/nav_panel/nav_panel.vue             |  56 +++-------
 src/components/timeline/timeline.js                |   1 +
 src/components/timeline/timeline.vue               |   2 +-
 src/components/timeline_menu/timeline_menu.js      |  16 ++-
 src/components/timeline_menu/timeline_menu.vue     |   8 +-
 .../timeline_menu/timeline_menu_content.js         |  52 ---------
 .../timeline_menu/timeline_menu_content.vue        |  31 ------
 11 files changed, 103 insertions(+), 249 deletions(-)
 delete mode 100644 src/components/timeline_menu/timeline_menu_content.js
 delete mode 100644 src/components/timeline_menu/timeline_menu_content.vue

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/App.scss b/src/App.scss
index c75c990a..4c9a8884 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -117,8 +117,15 @@ h4 {
   margin: 0;
 }
 
+.iconLetter {
+  display: inline-block;
+  text-align: center;
+  font-weight: 1000;
+}
+
 i[class*=icon-],
-.svg-inline--fa {
+.svg-inline--fa,
+.iconLetter {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon);
 }
@@ -746,13 +753,15 @@ option {
 }
 
 .fa-scale-110 {
-  &.svg-inline--fa {
+  &.svg-inline--fa,
+  &.iconLetter {
     font-size: 1.1em;
   }
 }
 
 .fa-old-padding {
-  &.svg-inline--fa {
+  &.svg-inline--fa,
+  &.iconLetter {
     padding: 0 0.3em;
   }
 }
diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
index 37e7868c..99fea0f0 100644
--- 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
diff --git a/src/components/lists_menu/lists_menu_content.vue b/src/components/lists_menu/lists_menu_content.vue
index e910d6eb..9c58b092 100644
--- a/src/components/lists_menu/lists_menu_content.vue
+++ b/src/components/lists_menu/lists_menu_content.vue
@@ -1,17 +1,7 @@
 <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>
-  </ul>
+<ul>
+  <NavigationEntry v-for="item in lists" :key="item.name" :show-pin="showPin" :item="item" />
+</ul>
 </template>
 
 <script src="./lists_menu_content.js"></script>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 7cc3122d..10998113 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,6 +1,8 @@
-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 { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -30,67 +32,6 @@ library.add(
   faStream,
   faList
 )
-
-export const TIMELINES = {
-  home: {
-    route: 'friends',
-    anonRoute: 'public-timeline',
-    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'
-  },
-  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'
-  }
-}
-
 const NavPanel = {
   created () {
     if (this.currentUser && this.currentUser.locked) {
@@ -98,8 +39,8 @@ const NavPanel = {
     }
   },
   components: {
-    TimelineMenuContent,
-    ListsMenuContent
+    ListsMenuContent,
+    NavigationEntry
   },
   data () {
     return {
@@ -134,6 +75,7 @@ const NavPanel = {
   },
   computed: {
     ...mapState({
+      lists: getListEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
@@ -143,31 +85,36 @@ const NavPanel = {
       collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
     }),
     rootItems () {
-      return Object
-        .entries({ ...ROOT_ITEMS })
-        .map(([k, v]) => ({ ...v, name: k }))
-        .filter(({ criteria, anon, anonRoute }) => {
-          const set = new Set(criteria || [])
-          if (!this.federating && set.has('federating')) return false
-          if (this.private && set.has('!private')) return false
-          if (!this.currentUser && !(anon || anonRoute)) return false
-          if ((!this.currentUser || !this.currentUser.locked) && set.has('lockedUser')) return false
-          return true
-        })
+      return filterNavigation(
+        Object
+          .entries({ ...ROOT_ITEMS })
+          .map(([k, v]) => ({ ...v, name: k })),
+        {
+          isFederating: this.federating,
+          isPrivate: this.private,
+          currentUser: this.currentUser
+        }
+      )
     },
     pinnedList () {
-      return Object
-        .entries({ ...TIMELINES, ...ROOT_ITEMS })
-        .filter(([k]) => this.pinnedItems.has(k))
-        .map(([k, v]) => ({ ...v, name: k }))
-        .filter(({ criteria, anon, anonRoute }) => {
-          const set = new Set(criteria || [])
-          if (!this.federating && set.has('federating')) return false
-          if (this.private && set.has('!private')) return false
-          if (!this.currentUser && !(anon || anonRoute)) return false
-          if (this.currentUser && !this.currentUser.locked && set.has('locked')) return false
-          return true
-        })
+      return filterNavigation(
+        [
+          ...Object
+            .entries({
+              ...TIMELINES,
+              ...ROOT_ITEMS
+            })
+            .filter(([k]) => this.pinnedItems.has(k))
+            .map(([k, v]) => ({ ...v, name: k })),
+          ...this.lists.filter((k) => this.pinnedItems.has(k.name))
+
+        ],
+        {
+          isFederating: this.federating,
+          isPrivate: this.private,
+          currentUser: this.currentUser
+        }
+      )
     },
     ...mapGetters(['unreadChatCount'])
   }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 99a4571e..767ba6ec 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -5,13 +5,18 @@
         <span>
           <span v-for="item in pinnedList" :key="item.name" class="pinned-item">
             <router-link
-              :to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
+              :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 fa-old-padding "
+                class="fa-scale-110 fa-old-padding"
                 :icon="item.icon"
               />
+              <span
+                v-if="item.iconLetter"
+                class="iconLetter fa-scale-110 fa-old-padding"
+              >{{ item.iconLetter }}</span>
             </router-link>
           </span>
         </span>
@@ -48,7 +53,9 @@
             v-show="showTimelines"
             class="timelines-background"
           >
-            <TimelineMenuContent class="timelines" :content="timelinesList" />
+            <ul class="timelines">
+              <NavigationEntry v-for="item in timelinesList" :key="item.name" :show-pin="true" :item="item" />
+            </ul>
           </div>
         </li>
         <li v-if="currentUser">
@@ -81,34 +88,10 @@
             v-show="showLists"
             class="timelines-background"
           >
-            <ListsMenuContent class="timelines" />
+            <ListsMenuContent :showPin="true" class="timelines" />
           </div>
         </li>
-        <li v-for="item in rootItems" :key="item.name">
-          <router-link
-            class="menu-item"
-            :to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              :icon="item.icon"
-            />{{ $t(item.label) }}
-            <button
-              type="button"
-              class="button-unstyled"
-              @click.stop.prevent="togglePin(item.name)"
-              >
-              <FAIcon
-                fixed-width
-                class="fa-scale-110 fa-old-padding "
-                :class="{ 'veryfaint': !isPinned(item.name) }"
-                :transform="!isPinned(item.name) ? 'rotate-45' : ''"
-                icon="thumbtack"
-              />
-            </button>
-          </router-link>
-        </li>
+        <NavigationEntry v-for="item in rootItems" :key="item.name" :show-pin="true" :item="item" />
       </ul>
     </div>
   </div>
@@ -220,16 +203,13 @@
     margin-right: 0.8em;
   }
 
-  .badge {
-    position: absolute;
-    right: 0.6rem;
-    top: 1.25em;
-  }
-
   .pinned-item {
-    .router-link-exact-active .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
+    .router-link-active {
+      & .svg-inline--fa,
+      & .iconLetter {
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+      }
     }
   }
 }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8f6cae66..ee590c4b 100644
--- 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,
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 627cafbb..fad3ff13 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,7 @@
 <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"
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 5a67b0a5..d74fbf4e 100644
--- 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
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 5ef96328..9acaff46 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -10,7 +10,10 @@
     @close="() => isOpen = false"
   >
     <template #content>
-      <TimelineMenuContent :content="timelinesList" />
+    <ListsMenuContent v-if="useListsMenu" :showPin="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 +141,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);
diff --git a/src/components/timeline_menu/timeline_menu_content.js b/src/components/timeline_menu/timeline_menu_content.js
deleted file mode 100644
index c5b1cff2..00000000
--- a/src/components/timeline_menu/timeline_menu_content.js
+++ /dev/null
@@ -1,52 +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 = {
-  props: ['content'],
-  methods: {
-    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 })
-      }
-    }
-  },
-  computed: {
-    ...mapState({
-      currentUser: state => state.users.currentUser,
-      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating,
-      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
-    }),
-    list () {
-      return (this.content || []).filter(({ criteria, anon, anonRoute }) => {
-        const set = new Set(criteria || [])
-        if (!this.federating && set.has('federating')) return false
-        if (this.private && set.has('!private')) return false
-        if (!this.currentUser && !(anon || anonRoute)) return false
-        return true
-      })
-    }
-  }
-}
-
-export default TimelineMenuContent
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
deleted file mode 100644
index 7dc76b62..00000000
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <ul>
-    <li v-for="item in list" :key="item.name">
-      <router-link
-        class="menu-item"
-        :to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          :icon="item.icon"
-        />{{ $t(item.label) }}
-        <button
-          type="button"
-          class="button-unstyled"
-          @click.stop.prevent="togglePin(item.name)"
-          >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding "
-            :class="{ 'veryfaint': !isPinned(item.name) }"
-            :transform="!isPinned(item.name) ? 'rotate-45' : ''"
-            icon="thumbtack"
-          />
-        </button>
-      </router-link>
-    </li>
-  </ul>
-</template>
-
-<script src="./timeline_menu_content.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 9e453372b37dde652c054c13febb97bb40bc1814 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Aug 2022 21:08:53 +0300
Subject: show pinned lists between timelines and rest

---
 src/components/nav_panel/nav_panel.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 10998113..cdfe996e 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -100,14 +100,14 @@ const NavPanel = {
       return filterNavigation(
         [
           ...Object
-            .entries({
-              ...TIMELINES,
-              ...ROOT_ITEMS
-            })
+            .entries({ ...TIMELINES })
             .filter(([k]) => this.pinnedItems.has(k))
             .map(([k, v]) => ({ ...v, name: k })),
-          ...this.lists.filter((k) => this.pinnedItems.has(k.name))
-
+          ...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 }))
         ],
         {
           isFederating: this.federating,
-- 
cgit v1.2.3-70-g09d2


From 3a16a59f37b9b637bb4cbc1c3575810a65515cbc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Aug 2022 21:56:30 +0300
Subject: navigation refactored, used in mobile nav as well

---
 src/components/mobile_nav/mobile_nav.js        |  9 ++-
 src/components/mobile_nav/mobile_nav.vue       | 29 ++++----
 src/components/nav_panel/nav_panel.js          | 25 ++-----
 src/components/nav_panel/nav_panel.vue         | 28 +-------
 src/components/navigation/filter.js            | 11 +++
 src/components/navigation/navigation.js        | 61 ++++++++++++++++
 src/components/navigation/navigation_entry.js  | 32 +++++++++
 src/components/navigation/navigation_entry.vue | 96 ++++++++++++++++++++++++++
 src/components/navigation/navigation_pins.js   | 68 ++++++++++++++++++
 src/components/navigation/navigation_pins.vue  | 64 +++++++++++++++++
 src/modules/api.js                             |  3 +
 11 files changed, 363 insertions(+), 63 deletions(-)
 create mode 100644 src/components/navigation/filter.js
 create mode 100644 src/components/navigation/navigation.js
 create mode 100644 src/components/navigation/navigation_entry.js
 create mode 100644 src/components/navigation/navigation_entry.vue
 create mode 100644 src/components/navigation/navigation_pins.js
 create mode 100644 src/components/navigation/navigation_pins.vue

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 877d52a9..af47f032 100644
--- 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 () {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 949cf17e..82e726a4 100644
--- 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"
@@ -178,13 +170,21 @@
     }
   }
 
+  .pins {
+    flex: 1;
+
+    .pinned-item {
+      flex-grow: 1;
+      text-align: center;
+    }
+  }
+
   .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;
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index cdfe996e..7daa5e6a 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -3,6 +3,7 @@ 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 {
@@ -40,7 +41,8 @@ const NavPanel = {
   },
   components: {
     ListsMenuContent,
-    NavigationEntry
+    NavigationEntry,
+    NavigationPins
   },
   data () {
     return {
@@ -90,26 +92,7 @@ const NavPanel = {
           .entries({ ...ROOT_ITEMS })
           .map(([k, v]) => ({ ...v, name: k })),
         {
-          isFederating: this.federating,
-          isPrivate: this.private,
-          currentUser: this.currentUser
-        }
-      )
-    },
-    pinnedList () {
-      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.private,
           currentUser: this.currentUser
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 767ba6ec..6e89094a 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -2,24 +2,7 @@
   <div class="NavPanel">
     <div class="panel panel-default">
       <div class="panel-heading">
-        <span>
-          <span v-for="item in pinnedList" :key="item.name" class="pinned-item">
-            <router-link
-              :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 fa-old-padding"
-                :icon="item.icon"
-              />
-              <span
-                v-if="item.iconLetter"
-                class="iconLetter fa-scale-110 fa-old-padding"
-              >{{ item.iconLetter }}</span>
-            </router-link>
-          </span>
-        </span>
+        <NavigationPins />
         <div class="spacer"/>
         <button
           class="button-unstyled"
@@ -203,14 +186,5 @@
     margin-right: 0.8em;
   }
 
-  .pinned-item {
-    .router-link-active {
-      & .svg-inline--fa,
-      & .iconLetter {
-        color: $fallback--text;
-        color: var(--selectedMenuText, $fallback--text);
-      }
-    }
-  }
 }
 </style>
diff --git a/src/components/navigation/filter.js b/src/components/navigation/filter.js
new file mode 100644
index 00000000..b41892a4
--- /dev/null
+++ 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
+  })
+}
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
new file mode 100644
index 00000000..f37d37fe
--- /dev/null
+++ b/src/components/navigation/navigation.js
@@ -0,0 +1,61 @@
+export const TIMELINES = {
+  home: {
+    route: 'friends',
+    anonRoute: 'public-timeline',
+    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'
+  }
+}
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
new file mode 100644
index 00000000..09c216ed
--- /dev/null
+++ b/src/components/navigation/navigation_entry.js
@@ -0,0 +1,32 @@
+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 })
+      }
+    }
+  },
+  computed: {
+    getters () {
+      return this.$store.getters
+    },
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
+    })
+  }
+}
+
+export default NavigationEntry
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
new file mode 100644
index 00000000..7d761395
--- /dev/null
+++ 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
+      class="icon iconLetter fa-scale-110"
+      v-if="item.iconLetter"
+      >{{ item.iconLetter }}
+    </span>{{ item.labelRaw || $t(item.label) }}
+    <button
+      type="button"
+      class="button-unstyled"
+      @click.stop.prevent="togglePin(item.name)"
+      >
+      <FAIcon
+        v-if="showPin"
+        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>
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
new file mode 100644
index 00000000..c71f6d24
--- /dev/null
+++ b/src/components/navigation/navigation_pins.js
@@ -0,0 +1,68 @@
+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 = {
+  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 () {
+      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.private,
+          currentUser: this.currentUser
+        }
+      )
+    }
+  }
+}
+
+export default NavPanel
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
new file mode 100644
index 00000000..754aad7a
--- /dev/null
+++ b/src/components/navigation/navigation_pins.vue
@@ -0,0 +1,64 @@
+<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;
+
+    & .svg-inline--fa,
+    & .iconLetter {
+      margin: 0;
+    }
+
+    &.router-link-active {
+      & .svg-inline--fa,
+      & .iconLetter {
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/modules/api.js b/src/modules/api.js
index 80a978f9..f783fa4f 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -15,6 +15,9 @@ const api = {
     mastoUserSocketStatus: null,
     followRequests: []
   },
+  getters: {
+    followRequestCount: state => state.api.followRequests.length
+  },
   mutations: {
     setBackendInteractor (state, backendInteractor) {
       state.backendInteractor = backendInteractor
-- 
cgit v1.2.3-70-g09d2


From 0123872b56ccd2d534913706ae0f27ea8d6481de Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Aug 2022 00:50:08 +0300
Subject: fixes + fixes for anon users

---
 src/components/mobile_nav/mobile_nav.vue          |  2 +-
 src/components/nav_panel/nav_panel.js             | 13 +++++++++++++
 src/components/nav_panel/nav_panel.vue            |  2 +-
 src/components/navigation/navigation.js           |  1 -
 src/components/navigation/navigation_entry.vue    |  2 +-
 src/components/navigation/navigation_pins.js      |  7 +++++++
 src/components/navigation/navigation_pins.vue     |  1 +
 test/unit/specs/modules/serverSideStorage.spec.js |  4 ++--
 8 files changed, 26 insertions(+), 6 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 82e726a4..01a77589 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -86,6 +86,7 @@
     grid-template-columns: 2fr auto;
     width: 100%;
     box-sizing: border-box;
+
     a {
       color: var(--topBarLink, $fallback--link);
     }
@@ -175,7 +176,6 @@
 
     .pinned-item {
       flex-grow: 1;
-      text-align: center;
     }
   }
 
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 7daa5e6a..b4e1ec0b 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -86,6 +86,19 @@ const NavPanel = {
       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.private,
+          currentUser: this.currentUser
+        }
+      )
+    },
     rootItems () {
       return filterNavigation(
         Object
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 6e89094a..84b000a4 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -37,7 +37,7 @@
             class="timelines-background"
           >
             <ul class="timelines">
-              <NavigationEntry v-for="item in timelinesList" :key="item.name" :show-pin="true" :item="item" />
+              <NavigationEntry v-for="item in timelinesItems" :key="item.name" :show-pin="true" :item="item" />
             </ul>
           </div>
         </li>
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index f37d37fe..57db2253 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -1,7 +1,6 @@
 export const TIMELINES = {
   home: {
     route: 'friends',
-    anonRoute: 'public-timeline',
     icon: 'home',
     label: 'nav.home_timeline',
     criteria: ['!private']
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 7d761395..0dcf5d85 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -21,7 +21,7 @@
       @click.stop.prevent="togglePin(item.name)"
       >
       <FAIcon
-        v-if="showPin"
+        v-if="showPin && currentUser"
         fixed-width
         class="fa-scale-110"
         :class="{ 'veryfaint': !isPinned(item.name) }"
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index c71f6d24..8a892466 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -42,6 +42,13 @@ const NavPanel = {
       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
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 754aad7a..f421b2be 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -46,6 +46,7 @@
     position: relative;
     flex: 0 0 3em;
     min-width: 2em;
+    text-align: center;
 
     & .svg-inline--fa,
     & .iconLetter {
diff --git a/test/unit/specs/modules/serverSideStorage.spec.js b/test/unit/specs/modules/serverSideStorage.spec.js
index ada3b7ca..edb23e8a 100644
--- a/test/unit/specs/modules/serverSideStorage.spec.js
+++ b/test/unit/specs/modules/serverSideStorage.spec.js
@@ -116,7 +116,7 @@ describe('The serverSideStorage module', () => {
         expect(state.prefsStorage._journal.length).to.eql(1)
         expect(state.prefsStorage._journal[0]).to.eql({
           path: 'simple.testing',
-          command: 'set',
+          operation: 'set',
           args: [1],
           // should have A timestamp, we don't really care what it is
           timestamp: state.prefsStorage._journal[0].timestamp
@@ -132,7 +132,7 @@ describe('The serverSideStorage module', () => {
         expect(state.prefsStorage._journal.length).to.eql(1)
         expect(state.prefsStorage._journal[0]).to.eql({
           path: 'simple.testing',
-          command: 'set',
+          operation: 'set',
           args: [2],
           // should have A timestamp, we don't really care what it is
           timestamp: state.prefsStorage._journal[0].timestamp
-- 
cgit v1.2.3-70-g09d2


From c3e7eadddff2357f51b49bb8eb8125777d754a0e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Aug 2022 01:00:41 +0300
Subject: let mobile users customize top bar as well

---
 src/boot/routes.js                         |  4 +++-
 src/components/nav_panel/nav_panel.js      |  1 +
 src/components/nav_panel/nav_panel.vue     |  7 +++++--
 src/components/side_drawer/side_drawer.js  |  2 ++
 src/components/side_drawer/side_drawer.vue | 12 ++++++++++++
 src/i18n/en.json                           |  3 ++-
 6 files changed, 25 insertions(+), 4 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 95e47199..178bb937 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -23,6 +23,7 @@ import RemoteUserResolver from 'components/remote_user_resolver/remote_user_reso
 import Lists from 'components/lists/lists.vue'
 import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
 import ListsEdit from 'components/lists_edit/lists_edit.vue'
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -78,7 +79,8 @@ export default (store) => {
     { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
-    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit }
+    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true }), beforeEnter: validateAuthenticatedRoute }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index b4e1ec0b..0d71a924 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -34,6 +34,7 @@ library.add(
   faList
 )
 const NavPanel = {
+  props: ['forceExpand'],
   created () {
     if (this.currentUser && this.currentUser.locked) {
       this.$store.dispatch('startFetchingFollowRequests')
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 84b000a4..5895473d 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="NavPanel">
     <div class="panel panel-default">
-      <div class="panel-heading">
+      <div
+        v-if="!forceExpand"
+        class="panel-heading"
+      >
         <NavigationPins />
         <div class="spacer"/>
         <button
@@ -15,7 +18,7 @@
           />
         </button>
       </div>
-      <ul class="panel-body" v-if="!collapsed">
+      <ul class="panel-body" v-if="!collapsed || forceExpand">
         <li v-if="currentUser || !privateMode">
           <button
             class="button-unstyled menu-item"
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 913fa695..cbfd6b7d 100644
--- 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
 )
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 7d9d36d7..5223fdfa 100644
--- 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"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2e845959..f042d562 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -149,7 +149,8 @@
     "preferences": "Preferences",
     "timelines": "Timelines",
     "chats": "Chats",
-    "lists": "Lists"
+    "lists": "Lists",
+    "edit_nav_mobile": "Customize navigation bar"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
-- 
cgit v1.2.3-70-g09d2


From 8d3d8fffab0106a8aff5822044a8c3c30bd6e057 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Aug 2022 01:19:19 +0300
Subject: fixes, clear cache on logout

---
 src/components/nav_panel/nav_panel.js                   |  4 ++--
 src/components/navigation/navigation_entry.js           |  1 +
 src/components/navigation/navigation_pins.js            |  2 +-
 src/modules/serverSideStorage.js                        | 17 +++++++++++++----
 src/modules/users.js                                    |  1 +
 .../entity_normalizer/entity_normalizer.service.js      |  1 +
 test/unit/specs/modules/serverSideStorage.spec.js       |  2 +-
 7 files changed, 20 insertions(+), 8 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 0d71a924..26e8440a 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -95,7 +95,7 @@ const NavPanel = {
         {
           hasChats: this.pleromaChatMessagesAvailable,
           isFederating: this.federating,
-          isPrivate: this.private,
+          isPrivate: this.privateMode,
           currentUser: this.currentUser
         }
       )
@@ -108,7 +108,7 @@ const NavPanel = {
         {
           hasChats: this.pleromaChatMessagesAvailable,
           isFederating: this.federating,
-          isPrivate: this.private,
+          isPrivate: this.privateMode,
           currentUser: this.currentUser
         }
       )
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
index 09c216ed..e17e9436 100644
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@@ -16,6 +16,7 @@ const NavigationEntry = {
       } else {
         this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value })
       }
+      this.$store.dispatch('pushServerSideStorage')
     }
   },
   computed: {
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 8a892466..43be4275 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -64,7 +64,7 @@ const NavPanel = {
         {
           hasChats: this.pleromaChatMessagesAvailable,
           isFederating: this.federating,
-          isPrivate: this.private,
+          isPrivate: this.privateMode,
           currentUser: this.currentUser
         }
       )
diff --git a/src/modules/serverSideStorage.js b/src/modules/serverSideStorage.js
index d95fbb8a..5581783f 100644
--- a/src/modules/serverSideStorage.js
+++ b/src/modules/serverSideStorage.js
@@ -51,8 +51,9 @@ export const _moveItemInArray = (array, value, movement) => {
   return newArray
 }
 
-const _wrapData = (data) => ({
+const _wrapData = (data, userName) => ({
   ...data,
+  _user: userName,
   _timestamp: Date.now(),
   _version: VERSION
 })
@@ -254,10 +255,17 @@ export const _doMigrations = (cache) => {
 }
 
 export const mutations = {
+  clearServerSideStorage (state, userData) {
+    state = { ...cloneDeep(defaultState) }
+  },
   setServerSideStorage (state, userData) {
     const live = userData.storage
     state.raw = live
     let cache = state.cache
+    if (cache._user !== userData.fqn) {
+      console.warn('cache belongs to another user! reinitializing local cache!')
+      cache = null
+    }
 
     cache = _doMigrations(cache)
 
@@ -371,12 +379,12 @@ export const mutations = {
     ]
     state.dirty = true
   },
-  updateCache (state) {
+  updateCache (state, { username }) {
     state.prefsStorage._journal = _mergeJournal(state.prefsStorage._journal)
     state.cache = _wrapData({
       flagStorage: toRaw(state.flagStorage),
       prefsStorage: toRaw(state.prefsStorage)
-    })
+    }, username)
   }
 }
 
@@ -388,8 +396,9 @@ const serverSideStorage = {
   actions: {
     pushServerSideStorage ({ state, rootState, commit }, { force = false } = {}) {
       const needPush = state.dirty || force
+      console.log(needPush)
       if (!needPush) return
-      commit('updateCache')
+      commit('updateCache', { username: rootState.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } }
       rootState.api.backendInteractor
         .updateProfile({ params })
diff --git a/src/modules/users.js b/src/modules/users.js
index b6fb9746..fe92d697 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -509,6 +509,7 @@ const users = {
           store.dispatch('setLastTimeline', 'public-timeline')
           store.dispatch('setLayoutWidth', windowWidth())
           store.dispatch('setLayoutHeight', windowHeight())
+          store.commit('clearServerSideStorage')
         })
     },
     loginUser (store, accessToken) {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index e9cbcfe6..b1ad2691 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -48,6 +48,7 @@ export const parseUser = (data) => {
 
   if (masto) {
     output.screen_name = data.acct
+    output.fqn = data.fqn
     output.statusnet_profile_url = data.url
 
     // There's nothing else to get
diff --git a/test/unit/specs/modules/serverSideStorage.spec.js b/test/unit/specs/modules/serverSideStorage.spec.js
index edb23e8a..f10e21e6 100644
--- a/test/unit/specs/modules/serverSideStorage.spec.js
+++ b/test/unit/specs/modules/serverSideStorage.spec.js
@@ -127,7 +127,7 @@ describe('The serverSideStorage module', () => {
         const state = cloneDeep(defaultState)
         setPreference(state, { path: 'simple.testing', value: 1 })
         setPreference(state, { path: 'simple.testing', value: 2 })
-        updateCache(state)
+        updateCache(state, { username: 'test' })
         expect(state.prefsStorage.simple.testing).to.eql(2)
         expect(state.prefsStorage._journal.length).to.eql(1)
         expect(state.prefsStorage._journal[0]).to.eql({
-- 
cgit v1.2.3-70-g09d2


From 50924aab5c4a5fccde3bcf653f4d9192385e9fc9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Aug 2022 20:34:45 +0300
Subject: fix prod build

---
 src/components/nav_panel/nav_panel.js        | 4 ++--
 src/components/navigation/filter.js          | 7 +++++++
 src/components/navigation/navigation_pins.js | 3 +--
 3 files changed, 10 insertions(+), 4 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 26e8440a..aeccd8a7 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,7 +1,7 @@
-import { getListEntries, ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
+import ListsMenuContent from 'src/components/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 { getListEntries, 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'
 
diff --git a/src/components/navigation/filter.js b/src/components/navigation/filter.js
index b41892a4..31b55486 100644
--- a/src/components/navigation/filter.js
+++ b/src/components/navigation/filter.js
@@ -9,3 +9,10 @@ export const filterNavigation = (list = [], { hasChats, isFederating, isPrivate,
     return true
   })
 }
+
+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]
+}))
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 59ad808b..9c416d9f 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -1,7 +1,6 @@
-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 { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-- 
cgit v1.2.3-70-g09d2


From ebe095bd769481cc114009e8193494d482f9ff4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Aug 2022 20:43:38 +0300
Subject: fix prod build again + fetch lists (and follow request) on login,
 stop fetching on logout, don't start fetching in components

---
 src/components/lists/lists.js                   |  3 ---
 src/components/lists_menu/lists_menu_content.js | 11 +----------
 src/components/nav_panel/nav_panel.js           |  3 ---
 src/modules/users.js                            |  7 +++++++
 4 files changed, 8 insertions(+), 16 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
index 791b99b2..9aed37f7 100644
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@@ -11,9 +11,6 @@ const Lists = {
     ListsCard,
     ListsNew
   },
-  created () {
-    this.$store.dispatch('startFetchingLists')
-  },
   computed: {
     lists () {
       return this.$store.state.lists.allLists
diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
index 99fea0f0..97b32210 100644
--- a/src/components/lists_menu/lists_menu_content.js
+++ b/src/components/lists_menu/lists_menu_content.js
@@ -1,20 +1,11 @@
 import { mapState } from 'vuex'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
-
-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]
-}))
+import { getListEntries } from 'src/components/navigation/filter.js'
 
 export const ListsMenuContent = {
   props: [
     'showPin'
   ],
-  created () {
-    this.$store.dispatch('startFetchingLists')
-  },
   components: {
     NavigationEntry
   },
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index aeccd8a7..b11a258b 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -36,9 +36,6 @@ library.add(
 const NavPanel = {
   props: ['forceExpand'],
   created () {
-    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequests')
-    }
   },
   components: {
     ListsMenuContent,
diff --git a/src/modules/users.js b/src/modules/users.js
index fe92d697..c13beb29 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -502,6 +502,7 @@ const users = {
           store.dispatch('stopFetchingTimeline', 'friends')
           store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
           store.dispatch('stopFetchingNotifications')
+          store.dispatch('stopFetchingLists')
           store.dispatch('stopFetchingFollowRequests')
           store.commit('clearNotifications')
           store.commit('resetStatuses')
@@ -556,6 +557,12 @@ const users = {
                 store.dispatch('startFetchingChats')
               }
 
+              store.dispatch('startFetchingLists')
+
+              if (user.locked) {
+                store.dispatch('startFetchingFollowRequests')
+              }
+
               if (store.getters.mergedConfig.useStreamingApi) {
                 store.dispatch('fetchTimeline', 'friends', { since: null })
                 store.dispatch('fetchNotifications', { since: null })
-- 
cgit v1.2.3-70-g09d2


From 14292d7ed12a806efcf766895bc1c3aa56fd53f8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Aug 2022 21:56:07 +0300
Subject: edit mode

---
 src/boot/routes.js                     |  2 +-
 src/components/nav_panel/nav_panel.js  | 10 ++++++++--
 src/components/nav_panel/nav_panel.vue | 14 +++++++++++---
 src/i18n/en.json                       |  3 ++-
 4 files changed, 22 insertions(+), 7 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 178bb937..39372ab9 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -80,7 +80,7 @@ export default (store) => {
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
-    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true }), beforeEnter: validateAuthenticatedRoute }
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index b11a258b..1e68561f 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -4,6 +4,7 @@ import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
 import { getListEntries, 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 Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -34,16 +35,18 @@ library.add(
   faList
 )
 const NavPanel = {
-  props: ['forceExpand'],
+  props: ['forceExpand', 'forceEditMode'],
   created () {
   },
   components: {
     ListsMenuContent,
     NavigationEntry,
-    NavigationPins
+    NavigationPins,
+    Checkbox
   },
   data () {
     return {
+      editMode: false,
       showTimelines: false,
       showLists: false,
       timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
@@ -57,6 +60,9 @@ const NavPanel = {
     toggleLists () {
       this.showLists = !this.showLists
     },
+    toggleEditMode () {
+      this.editMode = !this.editMode
+    },
     toggleCollapse () {
       this.$store.commit('setPreference', { path: 'simple.collapseNav', value: !this.collapsed })
       this.$store.dispatch('pushServerSideStorage')
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 077f97fc..01a407c1 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -46,7 +46,7 @@
               <NavigationEntry
                 v-for="item in timelinesItems"
                 :key="item.name"
-                :show-pin="true"
+                :show-pin="editMode"
                 :item="item"
               />
             </ul>
@@ -83,7 +83,7 @@
             class="timelines-background"
           >
             <ListsMenuContent
-              :show-pin="true"
+              :show-pin="editMode"
               class="timelines"
             />
           </div>
@@ -91,9 +91,17 @@
         <NavigationEntry
           v-for="item in rootItems"
           :key="item.name"
-          :show-pin="true"
+          :show-pin="editMode || forceEditMode"
           :item="item"
         />
+        <div
+          v-if="!forceEditMode"
+          class="panel-footer"
+        >
+          <Checkbox v-model="editMode">
+            {{ $t('nav.edit_pinned') }}
+          </Checkbox>
+        </div>
       </ul>
     </div>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f042d562..a7c86e6c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -150,7 +150,8 @@
     "timelines": "Timelines",
     "chats": "Chats",
     "lists": "Lists",
-    "edit_nav_mobile": "Customize navigation bar"
+    "edit_nav_mobile": "Customize navigation bar",
+    "edit_pinned": "Edit pinned items"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
-- 
cgit v1.2.3-70-g09d2


From bbd99dc3cf5e4877c9f2cb824c0ca74a681c2fa0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 15 Aug 2022 23:31:05 +0300
Subject: fix

---
 src/components/lists_timeline/lists_timeline.js | 4 ++--
 src/components/nav_panel/nav_panel.js           | 3 +--
 src/components/navigation/filter.js             | 2 +-
 src/modules/lists.js                            | 8 ++++----
 4 files changed, 8 insertions(+), 9 deletions(-)

(limited to 'src/components/nav_panel/nav_panel.js')

diff --git a/src/components/lists_timeline/lists_timeline.js b/src/components/lists_timeline/lists_timeline.js
index 7534420d..c3f408bd 100644
--- a/src/components/lists_timeline/lists_timeline.js
+++ b/src/components/lists_timeline/lists_timeline.js
@@ -17,14 +17,14 @@ const ListsTimeline = {
         this.listId = route.params.id
         this.$store.dispatch('stopFetchingTimeline', 'list')
         this.$store.commit('clearTimeline', { timeline: 'list' })
-        this.$store.dispatch('fetchList', { id: this.listId })
+        this.$store.dispatch('fetchList', { listId: this.listId })
         this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
       }
     }
   },
   created () {
     this.listId = this.$route.params.id
-    this.$store.dispatch('fetchList', { id: this.listId })
+    this.$store.dispatch('fetchList', { listId: this.listId })
     this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
   },
   unmounted () {
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 1e68561f..b54f2fa2 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,7 +1,7 @@
 import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
 import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
-import { getListEntries, filterNavigation } from 'src/components/navigation/filter.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 Checkbox from 'src/components/checkbox/checkbox.vue'
@@ -81,7 +81,6 @@ const NavPanel = {
   },
   computed: {
     ...mapState({
-      lists: getListEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
diff --git a/src/components/navigation/filter.js b/src/components/navigation/filter.js
index 31b55486..71661d6f 100644
--- a/src/components/navigation/filter.js
+++ b/src/components/navigation/filter.js
@@ -10,7 +10,7 @@ export const filterNavigation = (list = [], { hasChats, isFederating, isPrivate,
   })
 }
 
-export const getListEntries = state => state.lists.allLists.map(list => ({
+export const getListEntries = state => console.log(state.lists) || state.lists.allLists.map(list => ({
   name: 'list-' + list.id,
   routeObject: { name: 'lists-timeline', params: { id: list.id } },
   labelRaw: list.title,
diff --git a/src/modules/lists.js b/src/modules/lists.js
index 5c9432ad..d9fab969 100644
--- a/src/modules/lists.js
+++ b/src/modules/lists.js
@@ -15,10 +15,10 @@ export const mutations = {
     }
     state.allListsObject[listId].title = title
 
-    if (!find(state.allLists, { listId })) {
-      state.allLists.push({ listId, title })
+    if (!find(state.allLists, { id: listId })) {
+      state.allLists.push({ id: listId, title })
     } else {
-      find(state.allLists, { listId }).title = title
+      find(state.allLists, { id: listId }).title = title
     }
   },
   setListAccounts (state, { listId, accountIds }) {
@@ -61,7 +61,7 @@ const actions = {
   },
   fetchList ({ rootState, commit }, { listId }) {
     return rootState.api.backendInteractor.getList({ listId })
-      .then((list) => commit('setList', { id: list.id, title: list.title }))
+      .then((list) => commit('setList', { listId: list.id, title: list.title }))
   },
   fetchListAccounts ({ rootState, commit }, { listId }) {
     return rootState.api.backendInteractor.getListAccounts({ listId })
-- 
cgit v1.2.3-70-g09d2