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>

layouts/default.vue

@@ -59,7 +59,10 @@
                   <button class="control" @click="toggleDropdown">
                     <div class="avatar">
                       <span>{{ this.$auth.user.username }}</span>
-                      <img :src="this.$auth.user.avatar_url" class="icon" />
+                      <AvatarIcon
+                        :notif-count="this.$user.notifications.count"
+                        :dropdown-bg="isDropdownOpen"
+                      />
                     </div>
                     <DropdownIcon class="dropdown-icon" />
                   </button>
@@ -77,6 +80,12 @@
                           <span>Notifications</span>
                         </NuxtLink>
                       </li>
+                      <li>
+                        <NuxtLink to="/dashboard/settings">
+                          <SettingsIcon />
+                          <span>Settings</span>
+                        </NuxtLink>
+                      </li>
                       <!--<li v-tooltip="'Not implemented yet'" class="hidden">
                           <NuxtLink :to="userTeamsUrl" disabled>
                             <UsersIcon />
@@ -149,6 +158,7 @@ import ModrinthLogoSmall from '~/assets/images/logo.svg?inline'
 import HamburgerIcon from '~/assets/images/utils/hamburger.svg?inline'
 
 import NotificationIcon from '~/assets/images/sidebar/notifications.svg?inline'
+import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
 
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 import MoonIcon from '~/assets/images/utils/moon.svg?inline'
@@ -160,6 +170,8 @@ import GitHubIcon from '~/assets/images/utils/github.svg?inline'
 
 import CookieConsent from '~/components/ads/CookieConsent'
 
+import AvatarIcon from '~/components/ui/AvatarIcon'
+
 export default {
   components: {
     ModrinthLogo,
@@ -174,6 +186,8 @@ export default {
     NotificationIcon,
     HamburgerIcon,
     CookieConsent,
+    AvatarIcon,
+    SettingsIcon,
   },
   directives: {
     ClickOutside,
@@ -198,8 +212,12 @@ export default {
     $route() {
       this.$refs.nav.className = 'right-group'
       document.body.style.overflow = 'auto'
+      this.$store.dispatch('user/fetchNotifications')
     },
   },
+  created() {
+    this.$store.dispatch('user/fetchNotifications', { force: true })
+  },
   beforeCreate() {
     if (this.$route.query.code) {
       this.$router.push(this.$route.path)
@@ -397,13 +415,6 @@ export default {
                 align-items: center;
                 display: flex;
                 flex-grow: 1;
-                .icon {
-                  border-radius: 50%;
-                  height: 2rem;
-                  width: 2rem;
-                  margin-left: 0.5rem;
-                  margin-right: 0.25rem;
-                }
                 span {
                   display: block;
                   overflow: hidden;