Navigation Improvements (#65)

* Moved the colour scheme explanations to the settings page for it instead

* linking users to frontend traces

* displaying icons at all display levels

* add keybind for opening and closing quickswitch modal

very naive, ctrl+k will close other modals but I don't think that'll
be an issue

* basic switcher modal in place

need to do the actual filtering n such later but that's for future me

* add bis summaries to character list responses

* update tests to include new addition to character response

* return job name if name is empty

* fixed team redirect issue

* updated frontend to receive bis_summaries in character lists

* switcher is functional, just gotta fix it's styling

* fix opening switcher from the button

* Updated changelog

* limit searches, set up default for empty search

* use display name for bis summaries for consistency

* Make explanation hideable in a separate card

* version bump

* fix mobile nav for quickswitcher

* fix desktop icons for smaller screens

backend/api/serializers/character.py

@@ -3,6 +3,7 @@
 """
 # stdlib
 from re import compile
+from typing import Dict, List, Union
 # lib
 from rest_framework import serializers
 # local
@@ -21,6 +22,7 @@ class CharacterCollectionSerializer(serializers.ModelSerializer):
     alias = serializers.CharField(allow_blank=True, required=False)
     proxy = serializers.SerializerMethodField()
     user_id = serializers.IntegerField(required=False)
+    bis_lists = serializers.SerializerMethodField()
 
     class Meta:
         model = Character
@@ -33,6 +35,18 @@ def get_proxy(self, char: Character) -> bool:
         """
         return char.user is None
 
+    def get_bis_lists(self, char: Character) -> List[Dict[str, Union[str, int]]]:
+        """
+        Return summaries of bis lists
+        """
+        return [
+            {
+                'id': bis.id,
+                'name': bis.name if bis.name != '' else bis.job.display_name,
+            }
+            for bis in char.bis_lists.all()
+        ]
+
     def validate_world(self, world: str) -> str:
         """
         Handle the new format for world and DC that seems to be cropping up

backend/api/tests/test_character.py

@@ -94,6 +94,7 @@ def test_create(self):
         data['user_id'] = self._get_user().id
         data['alias'] = ''
         data['proxy'] = False
+        data['bis_lists'] = []
         obj_data = CharacterCollectionSerializer(char).data
         self.assertDictEqual(data, obj_data)
 

backend/api/tests/test_team_proxy.py

@@ -547,6 +547,7 @@ def setUp(self):
         # Lastly, link the characters to the team
         self.tm = self.team.members.create(character=self.char, bis_list=self.tl_main_bis, lead=True)
         self.proxy_tm = self.team.members.create(character=self.proxy, bis_list=self.proxy_bis, lead=False)
+        self.proxy.refresh_from_db()
 
         # Map gear names to ids for ease
         self.gear_id_map = {g.name: g.id for g in Gear.objects.all()}
@@ -575,7 +576,7 @@ def test_create(self):
         old_data = CharacterCollectionSerializer(instance=self.proxy).data
 
         # Remove changed keys
-        for key in ['proxy', 'user_id', 'id']:
+        for key in ['proxy', 'user_id', 'id', 'bis_lists']:
             new_data.pop(key)
             old_data.pop(key)
 

backend/backend/settings_live.py

@@ -184,7 +184,7 @@ def sampler(context):
     # If you wish to associate users to errors (assuming you are using
     # django.contrib.auth) you may enable sending PII data.
     send_default_pii=True,
-    release='savageaim@20231207',
+    release='savageaim@20231227',
 )
 
 # Channels

frontend/.env

@@ -1 +1 @@
-VUE_APP_VERSION="20231207"
+VUE_APP_VERSION="20231227"

frontend/package.json

@@ -14,6 +14,7 @@
     "bulma": "^0.9.3",
     "dayjs": "^1.10.7",
     "lodash.isequal": "^4.5.0",
+    "match-sorter": "^6.3.1",
     "microtip": "^0.2.2",
     "multi-range-slider-vue": "^1.1.4",
     "nouislider": "^15.7.0",
@@ -24,6 +25,7 @@
     "vue-notification": "^1.3.20",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.2",
+    "vue-shortkey": "^3.1.7",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="root">
+  <div id="root" v-shortkey.once="['ctrl', 'k']" @shortkey="openSwitcher">
     <Nav />
     <div class="container is-fluid">
-      <router-view ref="viewComponent"></router-view>
+      <router-view ref="viewComponent" :key="$route.fullPath"></router-view>
     </div>
     <Footer v-if="($route.name || '').indexOf('errors') == -1" />
     <notifications position="bottom left" classes="notification" />
@@ -113,6 +113,10 @@ export default class App extends Vue {
     // Reload the view currently loaded in the router-view component
     this.viewComponent.load()
   }
+
+  openSwitcher(): void {
+    this.viewComponent.openSwitcher()
+  }
 }
 </script>
 

frontend/src/assets/base.scss

@@ -82,6 +82,7 @@ $extra-colors: (
   "blurple": ($blurple, findColorInvert($blurple)),
 );
 $colors: map-merge($colors, $extra-colors);
+$panel-block-active-color: $link;
 
 $family-sans-serif: 'Raleway', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 

frontend/src/components/modals/changelog.vue

@@ -12,23 +12,23 @@
     </div>
     <div class="card-content content">
       <h2 class="has-text-primary subtitle">{{ version }}</h2>
-      <div class="divider"><i class="material-icons icon">expand_more</i> Settings Updates <i class="material-icons icon">expand_more</i></div>
-      <p>
-        Usernames are now editable on the User Settings page!
-        <ul><li>For anyone who's usernames are different since the Discord Username update, this will probably help!</li></ul>
-      </p>
+      <div class="divider"><i class="material-icons icon">auto_awesome</i> Happy Holidays and Happy New Year <i class="material-icons icon">auto_awesome</i></div>
+      <p>Hard to believe I've been at this for nearly 2 years now! Hope everyone had a good end to 2023 and a nice start to 2024. Roll on Dawntrail!!</p>
 
-      <div class="divider"><i class="material-icons icon">expand_more</i> Major Fixes <i class="material-icons icon">expand_more</i></div>
+      <div class="divider"><i class="material-icons icon">expand_more</i> Navigation Changes <i class="material-icons icon">expand_more</i></div>
+      <p>The explanation for what colours mean has been moved to the Theme settings page, and removed from the navbar.</p>
       <p>
-        Fixed a pretty major issue with XIVAPI that prevented new Characters from being imported.
+        A quick-switcher (similar to Discord's) has been added for faster moving between pages.
         <ul>
-          <li>Unsure how long this was present, and I'm genuinely very sorry if it affected you..</li>
+          <li>It's accessible through the navbar, or by pressing <code>Ctrl</code>+<code>K</code> on PC.</li>
+          <li>This menu allows you to type to search for pages, and select them via arrow keys or clicking/tapping.</li>
+          <li>It shows the top 5 most relevant items to your search, and when empty the list displays main character / team pages instead.</li>
         </ul>
       </p>
 
-      <div class="divider"><i class="material-icons icon">expand_more</i> Other Updates <i class="material-icons icon">expand_more</i></div>
-      <p>Added more visibility into frontend errors so I can become more aware of what issues arise and when.</p>
-      <p>Security updates.</p>
+      <div class="divider"><i class="material-icons icon">expand_more</i> Other Fixes <i class="material-icons icon">expand_more</i></div>
+      <p>If a non-leader accesses the Team's Settings page, the redirect will now put them back on the correct page.</p>
+
     </div>
   </div>
 </template>