Fix notification & follow list sorting, Add notification badge + loading animation (#206)

* Order notifications and followed mods

Fixes modrinth/knossos#195

* Add user notification badge on avatar

Closes modrinth/knossos#145

* Add loading animation

* Chain calls, remove console.log

* Chain calls

* Fix formatting to match prettier

* Remove unused userFollows

* Create user vuex store

* Add notification count indication on dashboard

* Fix background for light mode

* Move delay check to action, add force parameter

* Slightly decrease notification badge opacity on dashboard

* Remove SVG for image masking, use border around bubble

Also adds CSS for when the dropdown is opened/hovered

* Fix merge conflicts

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

store/auth.js

@@ -1,6 +1,5 @@
 export const state = () => ({
   user: null,
-  userFollows: [],
   token: '',
   headers: {},
 })
@@ -9,9 +8,6 @@ export const mutations = {
   SET_USER(state, user) {
     state.user = user
   },
-  SET_USER_FOLLOWS(state, follows) {
-    state.userFollows = follows
-  },
   SET_TOKEN(state, token) {
     state.token = token
   },
@@ -42,15 +38,4 @@ export const actions = {
       console.error('Request for user info encountered an error: ', e)
     }
   },
-  async fetchUserFollows({ commit }, { userId, token }) {
-    const follows = await this.$axios.get(
-      `https://api.modrinth.com/api/v1/user/${userId}/follows`,
-      {
-        headers: {
-          Authorization: token,
-        },
-      }
-    )
-    commit('SET_USER_FOLLOWS', follows)
-  },
 }

store/user.js

@@ -0,0 +1,35 @@
+export const state = () => ({
+  notifications: {
+    count: 0,
+    lastUpdated: 0,
+  },
+})
+
+export const mutations = {
+  SET_NOTIFICATIONS(state, count) {
+    state.notifications.count = count
+    state.notifications.lastUpdated = Date.now()
+  },
+}
+
+export const actions = {
+  async fetchNotifications(
+    { commit, state, rootState },
+    { force = false } = {}
+  ) {
+    if (
+      rootState.auth.user &&
+      rootState.auth.user.id &&
+      (force || Date.now() - state.notifications.lastUpdated > 300000)
+    ) {
+      const notifications = (
+        await this.$axios.get(
+          `https://api.modrinth.com/api/v1/user/${rootState.auth.user.id}/notifications`,
+          rootState.auth.headers
+        )
+      ).data
+
+      commit('SET_NOTIFICATIONS', notifications.length)
+    }
+  },
+}