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: [PATCH 1/4] 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(-)

diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4ae96fbef..a46fba7ae 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 {

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: [PATCH 2/4] 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(+)

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index c0b405f58..ecd4dc732 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 a46fba7ae..5b3fa6f46 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 b7839a129..68bf883ad 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.",

From 8c48a56a899aab57246fcfde0a28c1712de8b9da Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 20:24:21 +0300
Subject: [PATCH 3/4] change ugly checkbox to a list element that doesn't look
 too much out of place

---
 src/components/nav_panel/nav_panel.vue | 19 +++++++++++++------
 src/i18n/en.json                       |  3 ++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 32c9bed56..c88b019ca 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -96,14 +96,21 @@
           :show-pin="editMode || forceEditMode"
           :item="item"
         />
-        <div
+        <li
           v-if="!forceEditMode && currentUser"
-          class="panel-footer"
         >
-          <Checkbox v-model="editMode">
-            {{ $t('nav.edit_pinned') }}
-          </Checkbox>
-        </div>
+          <button
+            class="menu-item button-unstyled"
+            @click="toggleEditMode"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              :icon="editMode ? 'check' : 'wrench'"
+            />
+            {{ editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned') }}
+          </button>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 68bf883ad..8d61ba723 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -156,7 +156,8 @@
     "chats": "Chats",
     "lists": "Lists",
     "edit_nav_mobile": "Customize navigation bar",
-    "edit_pinned": "Edit pinned items"
+    "edit_pinned": "Edit pinned items",
+    "edit_finish": "Done editing"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",

From ea3ce55929b2c6460ee548bc85c4bef55f55dba7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 20:33:04 +0300
Subject: [PATCH 4/4] fix lists edit page

---
 src/components/lists/lists.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index cb98b017f..b8bab0a04 100644
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@@ -5,7 +5,7 @@
         {{ $t('lists.lists') }}
       </div>
       <router-link
-        :to="{ name: 'lists-edit' }"
+        :to="{ name: 'lists-new' }"
         class="button-default btn new-list-button"
       >
         {{ $t("lists.new") }}