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/navigation/navigation_pins.vue | 64 +++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/navigation/navigation_pins.vue

(limited to 'src/components/navigation/navigation_pins.vue')

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>
-- 
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/navigation/navigation_pins.vue')

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 80600137d1be64c83737ca3296f4aaae1033870c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Aug 2022 01:27:09 +0300
Subject: lint

---
 src/components/desktop_nav/desktop_nav.vue       |  2 +-
 src/components/lists_menu/lists_menu_content.vue | 11 ++--
 src/components/mobile_nav/mobile_nav.vue         |  2 +-
 src/components/nav_panel/nav_panel.vue           | 36 +++++++++----
 src/components/navigation/navigation_entry.vue   | 64 ++++++++++++------------
 src/components/navigation/navigation_pins.vue    | 12 +++--
 src/components/search_bar/search_bar.vue         |  4 +-
 src/components/timeline/timeline.vue             |  5 +-
 src/components/timeline_menu/timeline_menu.vue   | 17 +++++--
 9 files changed, 94 insertions(+), 59 deletions(-)

(limited to 'src/components/navigation/navigation_pins.vue')

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index bbb22707..5db7fc79 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -61,7 +61,7 @@
             :title="$t('nav.administration')"
           />
         </a>
-        <span class="spacer"/>
+        <span class="spacer" />
         <button
           v-if="currentUser"
           class="button-unstyled nav-icon"
diff --git a/src/components/lists_menu/lists_menu_content.vue b/src/components/lists_menu/lists_menu_content.vue
index 9c58b092..f93e80c9 100644
--- a/src/components/lists_menu/lists_menu_content.vue
+++ b/src/components/lists_menu/lists_menu_content.vue
@@ -1,7 +1,12 @@
 <template>
-<ul>
-  <NavigationEntry v-for="item in lists" :key="item.name" :show-pin="showPin" :item="item" />
-</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/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 01a77589..9152879c 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -21,7 +21,7 @@
             class="alert-dot"
           />
         </button>
-        <NavigationPins class="pins"/>
+        <NavigationPins class="pins" />
       </div> <div class="item right">
         <button
           v-if="currentUser"
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 0da5379a..077f97fc 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -6,7 +6,7 @@
         class="panel-heading"
       >
         <NavigationPins :limit="6" />
-        <div class="spacer"/>
+        <div class="spacer" />
         <button
           class="button-unstyled"
           @click="toggleCollapse"
@@ -18,7 +18,10 @@
           />
         </button>
       </div>
-      <ul class="panel-body" v-if="!collapsed || forceExpand">
+      <ul
+        v-if="!collapsed || forceExpand"
+        class="panel-body"
+      >
         <li v-if="currentUser || !privateMode">
           <button
             class="button-unstyled menu-item"
@@ -40,7 +43,12 @@
             class="timelines-background"
           >
             <ul class="timelines">
-              <NavigationEntry v-for="item in timelinesItems" :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>
@@ -49,11 +57,11 @@
             class="button-unstyled menu-item"
             @click="toggleLists"
           >
-              <FAIcon
-                fixed-width
-                class="fa-scale-110"
-                icon="list"
-              />{{ $t("nav.lists") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="list"
+            />{{ $t("nav.lists") }}
             <FAIcon
               class="timelines-chevron"
               fixed-width
@@ -74,10 +82,18 @@
             v-show="showLists"
             class="timelines-background"
           >
-            <ListsMenuContent :showPin="true" class="timelines" />
+            <ListsMenuContent
+              :show-pin="true"
+              class="timelines"
+            />
           </div>
         </li>
-        <NavigationEntry v-for="item in rootItems" :key="item.name" :show-pin="true" :item="item" />
+        <NavigationEntry
+          v-for="item in rootItems"
+          :key="item.name"
+          :show-pin="true"
+          :item="item"
+        />
       </ul>
     </div>
   </div>
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 0dcf5d85..64601be6 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,42 +1,42 @@
 <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 } }"
+  <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 && currentUser"
+        v-if="item.icon"
         fixed-width
         class="fa-scale-110"
-        :class="{ 'veryfaint': !isPinned(item.name) }"
-        :transform="!isPinned(item.name) ? 'rotate-45' : ''"
-        icon="thumbtack"
+        :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"
+        <div
+          v-if="item.badgeGetter && getters[item.badgeGetter]"
+          class="badge badge-notification"
         >
-        {{ getters[item.badgeGetter] }}
-      </div>
-    </button>
-  </router-link>
-</li>
+          {{ getters[item.badgeGetter] }}
+        </div>
+      </button>
+    </router-link>
+  </li>
 </template>
 
 <script src="./navigation_entry.js"></script>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index f421b2be..fc89ca3d 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -1,22 +1,24 @@
 <template>
   <span class="NavigationPins">
     <router-link
-      v-for="item in pinnedList" :key="item.name" class="pinned-item"
+      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>
+      >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="alert-dot"
-        />
+      />
     </router-link>
   </span>
 </template>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 14842835..199a7500 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -47,8 +47,8 @@
           class="cancel-icon fa-scale-110 fa-old-padding"
         />
       </button>
-      <span class="spacer"/>
-      <span class="spacer"/>
+      <span class="spacer" />
+      <span class="spacer" />
     </template>
   </div>
 </template>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index fad3ff13..f842240b 100644
--- 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" :timeline-name="timelineName"/>
+      <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.vue b/src/components/timeline_menu/timeline_menu.vue
index 9acaff46..e7250282 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -10,10 +10,19 @@
     @close="() => isOpen = false"
   >
     <template #content>
-    <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>
+      <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">
-- 
cgit v1.2.3-70-g09d2


From fa41f6cf969456316b5265df0bb550770624d7ba Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Aug 2022 00:50:38 +0300
Subject: add an underline to the selected pin to improve accesibility

---
 src/components/nav_panel/nav_panel.vue        | 9 +++++++--
 src/components/navigation/navigation_pins.vue | 9 +++++++--
 src/panel.scss                                | 4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

(limited to 'src/components/navigation/navigation_pins.vue')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 67b124dc..11260818 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -3,7 +3,7 @@
     <div class="panel panel-default">
       <div
         v-if="!forceExpand"
-        class="panel-heading"
+        class="panel-heading nav-panel-heading"
       >
         <NavigationPins :limit="6" />
         <div class="spacer" />
@@ -192,6 +192,7 @@
 
   .timelines-chevron {
     margin-left: 0.8em;
+    margin-right: 0.8em;
     font-size: 1.1em;
   }
 
@@ -209,9 +210,13 @@
     background-color: var(--bg, $fallback--bg);
   }
 
+  .nav-panel-heading {
+   // breaks without a unit
+   --panel-heading-height-padding: 0em;
+  }
+
   .fa-scale-110 {
     margin-right: 0.8em;
   }
-
 }
 </style>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index fc89ca3d..7942f23c 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -30,6 +30,7 @@
 .NavigationPins {
   display: flex;
   overflow: hidden;
+  height: 100%;
 
   .alert-dot {
     border-radius: 100%;
@@ -49,6 +50,7 @@
     flex: 0 0 3em;
     min-width: 2em;
     text-align: center;
+    overflow: visible;
 
     & .svg-inline--fa,
     & .iconLetter {
@@ -56,10 +58,13 @@
     }
 
     &.router-link-active {
+      color: $fallback--text;
+      color: var(--selectedMenuText, $fallback--text);
+      border-bottom: 4px solid;
+
       & .svg-inline--fa,
       & .iconLetter {
-        color: $fallback--text;
-        color: var(--selectedMenuText, $fallback--text);
+        color: inherit;
       }
     }
   }
diff --git a/src/panel.scss b/src/panel.scss
index 3a814269..1022758a 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -46,7 +46,7 @@
 .panel-footer {
   --panel-heading-height-padding: 0.6em;
   --__panel-heading-height: 3.2em;
-  --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
+  --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
   position: relative;
   box-sizing: border-box;
@@ -57,7 +57,7 @@
   grid-column-gap: 0.5em;
   flex: none;
   background-size: cover;
-  padding: 0.6em;
+  padding: var(--panel-heading-height-padding);
   height: var(--__panel-heading-height);
   line-height: var(--__panel-heading-height-inner);
   z-index: 4;
-- 
cgit v1.2.3-70-g09d2


From bd7356376ec9137da674f146a89c17ed62f56bc3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Aug 2022 15:36:54 +0300
Subject: fix links not being active by default

---
 src/components/navigation/navigation_entry.js  | 19 +++++++++++++++++++
 src/components/navigation/navigation_entry.vue |  2 +-
 src/components/navigation/navigation_pins.js   | 22 ++++++++++++++++++++++
 src/components/navigation/navigation_pins.vue  |  2 +-
 4 files changed, 43 insertions(+), 2 deletions(-)

(limited to 'src/components/navigation/navigation_pins.vue')

diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
index e17e9436..a19ee1b4 100644
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@@ -4,6 +4,15 @@ import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faThumbtack)
 
+const USERNAME_ROUTES = new Set([
+  'bookmarks',
+  'dms',
+  'interactions',
+  'notifications',
+  'chat',
+  'chats'
+])
+
 const NavigationEntry = {
   props: ['item', 'showPin'],
   methods: {
@@ -20,6 +29,16 @@ const NavigationEntry = {
     }
   },
   computed: {
+    routeTo () {
+      if (this.item.routeObject) {
+        return this.item.routeObject
+      }
+      const route = { name: (this.item.anon || this.currentUser) ? this.item.route : this.item.anonRoute }
+      if (USERNAME_ROUTES.has(route.name)) {
+        route.params = { username: this.currentUser.screen_name }
+      }
+      return route
+    },
     getters () {
       return this.$store.getters
     },
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 64601be6..c0b405f5 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -2,7 +2,7 @@
   <li class="NavigationEntry">
     <router-link
       class="menu-item"
-      :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
+      :to="routeTo"
     >
       <FAIcon
         v-if="item.icon"
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 9c416d9f..f0295c70 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -26,8 +26,30 @@ library.add(
   faStream,
   faList
 )
+
+const USERNAME_ROUTES = new Set([
+  'bookmarks',
+  'dms',
+  'interactions',
+  'notifications',
+  'chat',
+  'chats'
+])
+
 const NavPanel = {
   props: ['limit'],
+  methods: {
+    getRouteTo (item) {
+      if (item.routeObject) {
+        return item.routeObject
+      }
+      const route = { name: (item.anon || this.currentUser) ? item.route : item.anonRoute }
+      if (USERNAME_ROUTES.has(route.name)) {
+        route.params = { username: this.currentUser.screen_name }
+      }
+      return route
+    }
+  },
   computed: {
     getters () {
       return this.$store.getters
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 7942f23c..4ae96fbe 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -4,7 +4,7 @@
       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 } }"
+      :to="getRouteTo(item)"
     >
       <FAIcon
         v-if="item.icon"
-- 
cgit v1.2.3-70-g09d2


From 8dceffa8d79331aba1cc4efcc15710e902d938f2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 19:57:02 +0300
Subject: squeeze/stretch pinned items as long as there's enough space for it,
 hide items that won't fitc

---
 src/components/navigation/navigation_pins.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/navigation/navigation_pins.vue')

diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4ae96fbe..a46fba7a 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -29,6 +29,7 @@
 @import '../../_variables.scss';
 .NavigationPins {
   display: flex;
+  flex-wrap: wrap;
   overflow: hidden;
   height: 100%;
 
@@ -47,10 +48,12 @@
 
   .pinned-item {
     position: relative;
-    flex: 0 0 3em;
+    flex: 1 0 3em;
     min-width: 2em;
     text-align: center;
     overflow: visible;
+    box-sizing: border-box;
+    height: 100%;
 
     & .svg-inline--fa,
     & .iconLetter {
-- 
cgit v1.2.3-70-g09d2


From cf714c2756ac0b5981c269360c2024ab45da5d97 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 20:24:08 +0300
Subject: a11y

---
 src/components/navigation/navigation_entry.vue | 2 ++
 src/components/navigation/navigation_pins.vue  | 1 +
 src/i18n/en.json                               | 2 ++
 3 files changed, 5 insertions(+)

(limited to 'src/components/navigation/navigation_pins.vue')

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index c0b405f5..ecd4dc73 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -18,6 +18,8 @@
       <button
         type="button"
         class="button-unstyled"
+        :title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
+        :aria-pressed="!!isPinned"
         @click.stop.prevent="togglePin(item.name)"
       >
         <FAIcon
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index a46fba7a..5b3fa6f4 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -5,6 +5,7 @@
       :key="item.name"
       class="pinned-item"
       :to="getRouteTo(item)"
+      :title="item.labelRaw || $t(item.label)"
     >
       <FAIcon
         v-if="item.icon"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b7839a12..68bf883a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -88,6 +88,8 @@
       "admin": "Admin",
       "moderator": "Moderator"
     },
+    "unpin": "Unpin item",
+    "pin": "Pin item",
     "flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
     "flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
     "flash_fail": "Failed to load flash content, see console for details.",
-- 
cgit v1.2.3-70-g09d2