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/images/utils/check-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-check"><path d="M18 6 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/></svg>

assets/images/utils/list-end.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 12H3"></path>
+  <path d="M16 6H3"></path>
+  <path d="M10 18H3"></path>
+  <path d="M21 6v10a2 2 0 0 1-2 2h-4"></path>
+  <path d="m16 16-2 2 2 2"></path>
+
+</svg>

assets/images/utils/message.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+
+</svg>

assets/images/utils/mic.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12"></path>
+  <circle cx="17" cy="7" r="5"></circle>
+
+</svg>

assets/images/utils/modrinth.svg

@@ -0,0 +1,4 @@
+<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="currentColor"/>
+  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="currentColor"/>
+</svg>

assets/images/utils/more-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>

assets/images/utils/reply.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="9 17 4 12 9 7"></polyline>
+  <path d="M20 18v-2a4 4 0 0 0-4-4H4"></path>
+
+</svg>

assets/images/utils/sort-asc.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 11h4"></path>
+  <path d="M11 15h7"></path>
+  <path d="M11 19h10"></path>
+  <path d="M9 7 6 4 3 7"></path>
+  <path d="M6 6v14"></path>
+
+</svg>

assets/images/utils/sort-desc.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 5h10"></path>
+  <path d="M11 9h7"></path>
+  <path d="M11 13h4"></path>
+  <path d="m3 17 3 3 3-3"></path>
+  <path d="M6 18V4"></path>
+
+</svg>

assets/images/utils/unknown.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+  <line x1="12" y1="17" x2="12.01" y2="17"></line>
+
+</svg>

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 {