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>

assets/styles/components.scss

@@ -166,7 +166,6 @@
   @extend .padding-lg;
 
   position: relative;
-  min-height: var(--font-size-2xl);
 
   background-color: var(--color-raised-bg);
   border-radius: var(--size-rounded-card);
@@ -213,6 +212,11 @@
   &.moderation-card {
     background-color: var(--color-warning-banner-bg);
   }
+
+  &.recessed {
+    background-color: var(--color-bg);
+    box-shadow: none;
+  }
 }
 
 .universal-labels {
@@ -328,7 +332,9 @@
       .resizable-textarea-wrapper + *,
       .input-div + *
     ) {
-    margin-block-start: var(--spacing-card-md);
+    &:not(:empty) {
+      margin-block-start: var(--spacing-card-md);
+    }
   }
 
   :where(button, .button, .iconified-button) {
@@ -480,6 +486,7 @@
   justify-content: space-between;
   flex-wrap: wrap;
   row-gap: 0.5rem;
+  min-height: 3.75rem;
 }
 
 /*
@@ -528,6 +535,15 @@
   &:active {
     color: var(--color-link-active);
   }
+
+  &.no-underline {
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+  }
 }
 
 .title-link {
@@ -767,15 +783,6 @@
   }
 }
 
-.button-animation {
-  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
-
-  &:active:not(&:disabled) {
-    transform: scale(0.95);
-  }
-}
-
 .button-base {
   @extend .button-animation;
   font-weight: 500;
@@ -810,6 +817,14 @@
   &:active:not(&:disabled) {
     background-color: var(--color-raised-bg);
   }
+
+  &.brand-button {
+    color: var(--color-brand);
+  }
+
+  &.danger-button {
+    color: var(--color-special-red);
+  }
 }
 
 tr.button-transparent {
@@ -851,11 +866,6 @@ tr.button-transparent {
     filter: brightness(0.8);
   }
 
-  // For some reason this within the above block makes it universal and not only applied to children. SCSS bug maybe?
-  &:active:not(&.disabled) button:not(&:disabled) {
-    transform: scale(0.95);
-  }
-
   &.disabled {
     cursor: not-allowed;
     filter: grayscale(50%);
@@ -1461,13 +1471,17 @@ button {
       flex-shrink: 1;
     }
   }
+
+  &.right-aligned {
+    justify-content: end;
+  }
 }
 
 .input-stack {
   display: flex;
   flex-direction: column;
 
-  > * {
+  > *:not(:last-child) {
     margin-bottom: var(--spacing-card-sm);
   }
 
@@ -1605,3 +1619,84 @@ button {
   height: 0;
   overflow: hidden;
 }
+
+.backed-svg {
+  --size: 2.5rem;
+  border-radius: var(--size-rounded-sm);
+  background-color: var(--color-button-bg);
+  width: var(--size);
+  height: var(--size);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: calc(0.6 * var(--size));
+    height: calc(0.6 * var(--size));
+  }
+
+  &.circle {
+    border-radius: 50%;
+  }
+
+  &.raised {
+    background-color: var(--color-raised-bg);
+  }
+}
+
+a.iconified-link,
+a.iconified-stacked-link {
+  display: contents;
+
+  .space {
+    opacity: 0;
+  }
+
+  .title {
+    font-weight: bold;
+  }
+
+  .stacked {
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  &:focus-visible .title,
+  &:hover .title {
+    text-decoration: underline;
+    filter: var(--hover-filter);
+  }
+
+  &:active .title {
+    filter: var(--active-filter);
+  }
+}
+
+a.iconified-link {
+  &:focus-visible span,
+  &:hover span {
+    text-decoration: underline;
+    filter: var(--hover-filter);
+  }
+
+  &:active span {
+    filter: var(--active-filter);
+  }
+}
+
+a.subtle-link {
+  &:focus-visible,
+  &:hover {
+    text-decoration: underline;
+    filter: var(--hover-filter);
+  }
+
+  &:active {
+    filter: var(--active-filter);
+  }
+}
+
+.inline-svg svg,
+svg.inline-svg {
+  vertical-align: middle;
+}

assets/styles/global.scss

@@ -2,12 +2,12 @@ html {
   @extend .dark-mode;
   --dark-color-text: #b0bac5;
   --dark-color-text-dark: #ecf9fb;
+  --color-text-secondary: var(--color-icon);
 }
 
 .light-mode {
   --color-icon: #6b7280;
   --color-text: hsl(221, 39%, 11%);
-  --color-text-secondary: var(--color-icon);
   --color-text-inactive: hsl(215, 14%, 34%);
   --color-text-dark: #1a202c;
   --color-heading: #2c313d;
@@ -260,6 +260,9 @@ html {
   --landing-green-label-bg: rgba(0, 216, 69, 0.15);
 
   --landing-raw-bg: #000;
+
+  --hover-filter: brightness(120%);
+  --active-filter: brightness(140%);
 }
 
 .oled-mode {
@@ -271,6 +274,10 @@ html {
   --color-button-bg-hover: #2d2d32;
   --color-button-bg-active: #3c3c40;
   --color-table-alternate-row: #19191c;
+  --color-divider-dark: #2c3134;
+
+  --color-warning-banner-bg: hsl(0, 45%, 11%);
+  --color-ad: #0d1828;
 }
 
 body {