Update master with new auth (#1236)

* 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

* New authentication (#1234)

* Initial new auth work

* more auth pages

* Finish most

* more

* fix on landing page

* Finish everything but PATs + Sessions

* fix threads merge bugs

* fix cf pages ssr

* fix most issues

* Finish authentication

* Fix merge

---------

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

assets/styles/components.scss

@@ -903,6 +903,8 @@ tr.button-transparent {
   cursor: pointer;
   width: fit-content;
   height: fit-content;
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out,
+    outline 0.2s ease-in-out;
 
   text-decoration: none;
 

components/ui/CopyCode.vue

@@ -1,6 +1,6 @@
 <template>
   <button class="code" :class="{ copied }" title="Copy code to clipboard" @click="copyText">
-    {{ text }}
+    <span>{{ text }}</span>
     <CheckIcon v-if="copied" />
     <ClipboardCopyIcon v-else />
   </button>
@@ -51,6 +51,12 @@ export default {
   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;
 
+  span {
+    max-width: 10rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   svg {
     width: 1em;
     height: 1em;

components/ui/EnvironmentIndicator.vue

@@ -7,7 +7,7 @@
     v-else-if="
       !['resourcepack', 'shader'].includes(type) &&
       !(type === 'plugin' && search) &&
-      !categories.some((x) => $tag.loaderData.dataPackLoaders.includes(x))
+      !categories.some((x) => tags.loaderData.dataPackLoaders.includes(x))
     "
     class="environment"
   >
@@ -47,57 +47,52 @@
     </template>
   </span>
 </template>
-<script>
+<script setup>
 import InfoIcon from '~/assets/images/utils/info.svg'
 import ClientIcon from '~/assets/images/utils/client.svg'
 import GlobeIcon from '~/assets/images/utils/globe.svg'
 import ServerIcon from '~/assets/images/utils/server.svg'
-export default {
-  components: {
-    InfoIcon,
-    ClientIcon,
-    ServerIcon,
-    GlobeIcon,
+
+defineProps({
+  type: {
+    type: String,
+    default: 'mod',
   },
-  props: {
-    type: {
-      type: String,
-      default: 'mod',
-    },
-    serverSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    clientSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    typeOnly: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    alwaysShow: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    search: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    categories: {
-      type: Array,
-      required: false,
-      default() {
-        return []
-      },
+  serverSide: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  clientSide: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  typeOnly: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  alwaysShow: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  search: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  categories: {
+    type: Array,
+    required: false,
+    default() {
+      return []
     },
   },
-}
+})
+
+const tags = useTags()
 </script>
 <style lang="scss" scoped>
 .environment {

components/ui/Modal.vue

@@ -3,7 +3,7 @@
     <div
       :class="{
         shown: actuallyShown,
-        noblur: !$orElse($cosmetics.advancedRendering, true),
+        noblur: !$orElse(cosmetics.advancedRendering, true),
       }"
       class="modal-overlay"
       @click="hide"
@@ -38,6 +38,11 @@ export default {
       default: null,
     },
   },
+  setup() {
+    const cosmetics = useCosmetics()
+
+    return { cosmetics }
+  },
   data() {
     return {
       shown: false,

components/ui/ModalCreation.vue

@@ -10,7 +10,7 @@
       <Chips
         id="project-type"
         v-model="projectType"
-        :items="$tag.projectTypes.map((x) => x.display)"
+        :items="tags.projectTypes.map((x) => x.display)"
       />
       <label for="name">
         <span class="label__title">Name<span class="required">*</span></span>
@@ -86,9 +86,14 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const tags = useTags()
+
+    return { tags }
+  },
   data() {
     return {
-      projectType: this.$tag.projectTypes[0].display,
+      projectType: this.tags.projectTypes[0].display,
       name: '',
       slug: '',
       description: '',
@@ -100,7 +105,7 @@ export default {
       this.$refs.modal.hide()
     },
     getProjectType() {
-      return this.$tag.projectTypes.find((x) => this.projectType === x.display)
+      return this.tags.projectTypes.find((x) => this.projectType === x.display)
     },
     getClientSide() {
       switch (this.getProjectType().id) {
@@ -137,6 +142,8 @@ export default {
 
       const formData = new FormData()
 
+      const auth = await useAuth()
+
       formData.append(
         'data',
         JSON.stringify({
@@ -148,8 +155,8 @@ export default {
           initial_versions: [],
           team_members: [
             {
-              user_id: this.$auth.user.id,
-              name: this.$auth.user.username,
+              user_id: auth.value.user.id,
+              name: auth.value.user.username,
               role: 'Owner',
             },
           ],
@@ -167,7 +174,6 @@ export default {
           body: formData,
           headers: {
             'Content-Disposition': formData,
-            Authorization: this.$auth.token,
           },
         })
 
@@ -193,7 +199,7 @@ export default {
       stopLoading()
     },
     show() {
-      this.projectType = this.$tag.projectTypes[0].display
+      this.projectType = this.tags.projectTypes[0].display
       this.name = ''
       this.slug = ''
       this.description = ''

components/ui/ModalModeration.vue

@@ -113,7 +113,6 @@ export default {
         await useBaseFetch(`project/${this.project.id}`, {
           method: 'PATCH',
           body: data,
-          ...this.$defaultHeaders(),
         })
 
         this.$refs.modal.hide()

components/ui/ModalReport.vue

@@ -23,7 +23,7 @@
       <Multiselect
         id="report-type"
         v-model="reportType"
-        :options="$tag.reportTypes"
+        :options="tags.reportTypes"
         :custom-label="(value) => value.charAt(0).toUpperCase() + value.slice(1)"
         :multiple="false"
         :searchable="false"
@@ -82,6 +82,11 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const tags = useTags()
+
+    return { tags }
+  },
   data() {
     return {
       reportType: '',
@@ -110,7 +115,6 @@ export default {
         await useBaseFetch('report', {
           method: 'POST',
           body: data,
-          ...this.$defaultHeaders(),
         })
 
         this.$refs.modal.hide()

components/ui/ModalTransfer.vue

@@ -128,14 +128,15 @@ export default {
     async proceed() {
       startLoading()
       try {
-        await useBaseFetch(`user/${this.$auth.user.id}/payouts`, {
+        const auth = await useAuth()
+
+        await useBaseFetch(`user/${auth.value.user.id}/payouts`, {
           method: 'POST',
           body: {
             amount: Number(this.amount.replace('$', '')),
           },
-          ...this.$defaultHeaders(),
         })
-        await useAuth(this.$auth.token)
+        await useAuth(auth.value.token)
 
         this.$refs.modal.hide()
       } catch (err) {

components/ui/NotificationItem.vue

@@ -58,7 +58,7 @@
         <nuxt-link :to="getProjectLink(project)" class="title-link">
           {{ project.title }}
         </nuxt-link>
-        <template v-if="$tag.rejectedStatuses.includes(notification.body.new_status)">
+        <template v-if="tags.rejectedStatuses.includes(notification.body.new_status)">
           has been <Badge :type="notification.body.new_status" />
         </template>
         <template v-else>
@@ -106,6 +106,7 @@
         :raised="raised"
         :messages="getMessages()"
         class="thread-summary"
+        :auth="auth"
       />
       <div v-else-if="type === 'project_update'" class="version-list">
         <div
@@ -221,7 +222,7 @@
         >
           <CheckIcon /> Mark as read
         </button>
-        <CopyCode v-if="$cosmetics.developerMode" :text="notification.id" />
+        <CopyCode v-if="cosmetics.developerMode" :text="notification.id" />
       </div>
       <div v-else class="input-group">
         <nuxt-link
@@ -253,7 +254,7 @@
         >
           <CheckIcon /> Mark as read
         </button>
-        <CopyCode v-if="$cosmetics.developerMode" :text="notification.id" />
+        <CopyCode v-if="cosmetics.developerMode" :text="notification.id" />
       </div>
     </div>
   </div>
@@ -301,8 +302,15 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  auth: {
+    type: Object,
+    required: true,
+  },
 })
 
+const cosmetics = useCosmetics()
+const tags = useTags()
+
 const type = computed(() =>
   !props.notification.body || props.notification.body.type === 'legacy_markdown'
     ? null
@@ -357,7 +365,6 @@ async function performAction(notification, actionIndex) {
     if (actionIndex !== null) {
       await useBaseFetch(`${notification.actions[actionIndex].action_route[1]}`, {
         method: notification.actions[actionIndex].action_route[0].toUpperCase(),
-        ...app.$defaultHeaders(),
       })
     }
   } catch (err) {