Merge branch 'navigation-update' into shigusegubu-vue3

* navigation-update:
  fix lists edit page
  change ugly checkbox to a list element that doesn't look too much out of place
  a11y
  squeeze/stretch pinned items as long as there's enough space for it, hide items that won't fitc

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") }}

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>

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

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"

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.",
@@ -154,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…",