Threads and more! (#1232)

* Begin UI for threads and moderation overhaul

* Hide close button on non-report threads

* Fix review age coloring

* Add project count

* Remove action buttons from queue page and add queued date to project page

* Hook up to actual data

* Remove unused icon

* Get up to 1000 projects in queue

* prettier

* more prettier

* Changed all the things

* lint

* rebuild

* Add omorphia

* Workaround formatjs bug in ThreadSummary.vue

* Fix notifications page on prod

* Fix a few notifications and threads bugs

* lockfile

* Fix duplicate button styles

* more fixes and polishing

* More fixes

* Remove legacy pages

* More bugfixes

* Add some error catching for reports and notifications

* More error handling

* fix lint

* Add inbox links

* Remove loading component and rename member header

* Rely on threads always existing

* Handle if project update notifs are not grouped

* oops

* Fix chips on notifications page

* Import ModalModeration

* finish threads

---------

Co-authored-by: triphora <emma@modrinth.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>

components/ui/Avatar.vue

@@ -4,7 +4,7 @@
     ref="img"
     :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''} ${
       pixelated ? 'pixelated' : ''
-    }`"
+    } ${raised ? 'raised' : ''}`"
     :src="src"
     :alt="alt"
     :loading="loading"
@@ -12,7 +12,9 @@
   />
   <svg
     v-else
-    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''}`"
+    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''} ${
+      raised ? 'raised' : ''
+    }`"
     xml:space="preserve"
     fill-rule="evenodd"
     stroke-linecap="round"
@@ -47,7 +49,7 @@ export default {
       type: String,
       default: 'sm',
       validator(value) {
-        return ['xs', 'sm', 'md', 'lg'].includes(value)
+        return ['xxs', 'xs', 'sm', 'md', 'lg'].includes(value)
       },
     },
     circle: {
@@ -62,6 +64,10 @@ export default {
       type: String,
       default: 'eager',
     },
+    raised: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -89,6 +95,12 @@ export default {
   background-color: var(--color-button-bg);
   object-fit: contain;
 
+  &.size-xxs {
+    --size: 1.25rem;
+    box-shadow: var(--shadow-inset), var(--shadow-card);
+    border-radius: var(--size-rounded-sm);
+  }
+
   &.size-xs {
     --size: 2.5rem;
     box-shadow: var(--shadow-inset), var(--shadow-card);
@@ -122,5 +134,9 @@ export default {
   &.pixelated {
     image-rendering: pixelated;
   }
+
+  &.raised {
+    background-color: var(--color-raised-bg);
+  }
 }
 </style>