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>

components/ui/report/ReportInfo.vue

@@ -63,10 +63,11 @@
       class="thread-summary"
       :raised="raised"
       :link="`/${moderation ? 'moderation' : 'dashboard'}/report/${report.id}`"
+      :auth="auth"
     />
     <div class="reporter-info">
       <ReportIcon class="inline-svg" /> Reported by
-      <span v-if="$auth.user.id === report.reporterUser.id">you</span>
+      <span v-if="auth.user.id === report.reporterUser.id">you</span>
       <nuxt-link v-else :to="`/user/${report.reporterUser.username}`" class="iconified-link">
         <Avatar
           :src="report.reporterUser.avatar_url"
@@ -81,7 +82,7 @@
       <span v-tooltip="$dayjs(report.created).format('MMMM D, YYYY [at] h:mm A')">{{
         fromNow(report.created)
       }}</span>
-      <CopyCode v-if="$cosmetics.developerMode" :text="report.id" class="report-id" />
+      <CopyCode v-if="cosmetics.developerMode" :text="report.id" class="report-id" />
     </div>
   </div>
 </template>
@@ -117,7 +118,13 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  auth: {
+    type: Object,
+    required: true,
+  },
 })
+
+const cosmetics = useCosmetics()
 </script>
 
 <style lang="scss" scoped>

components/ui/report/ReportView.vue

@@ -7,11 +7,16 @@
         :link-stack="breadcrumbsStack"
       />
       <h2>Report details</h2>
-      <ReportInfo :report="report" :show-thread="false" :show-message="false" />
+      <ReportInfo :report="report" :show-thread="false" :show-message="false" :auth="auth" />
     </section>
     <section class="universal-card">
       <h2>Messages</h2>
-      <ConversationThread :thread="thread" :report="report" :update-thread="updateThread" />
+      <ConversationThread
+        :thread="thread"
+        :report="report"
+        :update-thread="updateThread"
+        :auth="auth"
+      />
     </section>
   </div>
 </template>
@@ -30,10 +35,12 @@ const props = defineProps({
     type: Array,
     default: null,
   },
+  auth: {
+    type: Object,
+    required: true,
+  },
 })
 
-const app = useNuxtApp()
-
 const report = ref(null)
 
 await fetchReport().then((result) => {
@@ -41,7 +48,7 @@ await fetchReport().then((result) => {
 })
 
 const { data: rawThread } = await useAsyncData(`thread/${report.value.thread_id}`, () =>
-  useBaseFetch(`thread/${report.value.thread_id}`, app.$defaultHeaders())
+  useBaseFetch(`thread/${report.value.thread_id}`)
 )
 const thread = computed(() => addReportMessage(rawThread.value, report.value))
 
@@ -52,7 +59,7 @@ async function updateThread(newThread) {
 
 async function fetchReport() {
   const { data: rawReport } = await useAsyncData(`report/${props.reportId}`, () =>
-    useBaseFetch(`report/${props.reportId}`, app.$defaultHeaders())
+    useBaseFetch(`report/${props.reportId}`)
   )
   rawReport.value.item_id = rawReport.value.item_id.replace(/"/g, '')
 
@@ -67,7 +74,7 @@ async function fetchReport() {
   let users = []
   if (userIds.length > 0) {
     const { data: usersVal } = await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-      useBaseFetch(`users?ids=${JSON.stringify(userIds)}`, app.$defaultHeaders())
+      useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`)
     )
     users = usersVal.value
   }
@@ -75,7 +82,7 @@ async function fetchReport() {
   let version = null
   if (versionId) {
     const { data: versionVal } = await useAsyncData(`version/${versionId}`, () =>
-      useBaseFetch(`version/${versionId}`, app.$defaultHeaders())
+      useBaseFetch(`version/${versionId}`)
     )
     version = versionVal.value
   }
@@ -89,7 +96,7 @@ async function fetchReport() {
   let project = null
   if (projectId) {
     const { data: projectVal } = await useAsyncData(`project/${projectId}`, () =>
-      useBaseFetch(`project/${projectId}`, app.$defaultHeaders())
+      useBaseFetch(`project/${projectId}`)
     )
     project = projectVal.value
   }

components/ui/report/ReportsList.vue

@@ -3,7 +3,7 @@
   <ReportInfo
     v-for="report in reports.filter(
       (x) =>
-        (moderation || x.reporterUser.id === $auth.user.id) &&
+        (moderation || x.reporterUser.id === auth.user.id) &&
         (viewMode === 'open' ? x.open : !x.open)
     )"
     :key="report.id"
@@ -11,6 +11,7 @@
     :thread="report.thread"
     :moderation="moderation"
     raised
+    :auth="auth"
     class="universal-card recessed"
   />
 </template>
@@ -24,16 +25,16 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  auth: {
+    type: Object,
+    required: true,
+  },
 })
 
-const app = useNuxtApp()
-
 const viewMode = ref('open')
 const reports = ref([])
 
-let { data: rawReports } = await useAsyncData('report', () =>
-  useBaseFetch('report', app.$defaultHeaders())
-)
+let { data: rawReports } = await useAsyncData('report', () => useBaseFetch('report'))
 
 rawReports = rawReports.value.map((report) => {
   report.item_id = report.item_id.replace(/"/g, '')
@@ -53,13 +54,13 @@ const threadIds = [
 
 const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
   await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-    useBaseFetch(`users?ids=${JSON.stringify(userIds)}`, app.$defaultHeaders())
+    useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`)
   ),
   await useAsyncData(`versions?ids=${JSON.stringify(versionIds)}`, () =>
-    useBaseFetch(`versions?ids=${JSON.stringify(versionIds)}`, app.$defaultHeaders())
+    useBaseFetch(`versions?ids=${encodeURIComponent(JSON.stringify(versionIds))}`)
   ),
   await useAsyncData(`threads?ids=${JSON.stringify(threadIds)}`, () =>
-    useBaseFetch(`threads?ids=${JSON.stringify(threadIds)}`, app.$defaultHeaders())
+    useBaseFetch(`threads?ids=${encodeURIComponent(JSON.stringify(threadIds))}`)
   ),
 ])
 
@@ -70,7 +71,7 @@ const versionProjects = versions.value.map((version) => version.project_id)
 const projectIds = [...new Set(reportedProjects.concat(versionProjects))]
 
 const { data: projects } = await useAsyncData(`projects?ids=${JSON.stringify(projectIds)}`, () =>
-  useBaseFetch(`projects?ids=${JSON.stringify(projectIds)}`, app.$defaultHeaders())
+  useBaseFetch(`projects?ids=${encodeURIComponent(JSON.stringify(projectIds))}`)
 )
 
 reports.value = rawReports.map((report) => {