Switch notifications to new route, fix normal text from being bright white

assets/styles/global.scss

@@ -73,8 +73,8 @@
   --color-icon: #acacac;
   --color-text: #cecece;
   --color-text-medium:#e4e4e4;
-  --color-text-dark:#ffffff;
-  --color-heading: #ffffff;
+  --color-text-dark: #fbf8ec;
+  --color-heading: #fbf8ec;
   --color-heading-light: #8a8a8a;
   --color-bg: #171719;
   --color-raised-bg: #222224;
@@ -250,18 +250,12 @@ textarea {
 .ea-content {
   background: var(--color-ad) !important;
   border-radius: var(--size-rounded-card) !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  margin-bottom: 0 !important;
-  margin-top: 0 !important;
+  margin: 0 !important;
   box-shadow: var(--shadow-faint) !important;
 }
 
 .ea-callout {
-  margin-top: 0.25rem !important;
-  margin-bottom: 0.25rem !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+  margin: 0.25rem 0 !important;
   padding: 0 !important;
 }
 

pages/dashboard/notifications.vue

@@ -1,17 +1,44 @@
 <template>
   <DashboardPage>
     <div class="section-header columns">
-      <h3 class="column-grow-1">My invites</h3>
+      <h3 class="column-grow-1">My notifications</h3>
     </div>
-    <div v-for="invite in invites" :key="invite.team_id" class="invite columns">
+    <div
+      v-for="notification in notifications"
+      :key="notification.id"
+      class="notification columns"
+    >
       <div class="text">
-        <p>
-          Invite to join <strong>{{ invite.username }}'s</strong> team.
+        <nuxt-link :to="'/' + notification.link" class="top-wrapper">
+          <h3 class="title">
+            {{ notification.title }}
+          </h3>
+          <p
+            v-tooltip="
+              $dayjs(notification.created).format(
+                '[Created at] YYYY-MM-DD [at] HH:mm A'
+              )
+            "
+            class="date"
+          >
+            Notified {{ $dayjs(notification.created).fromNow() }}
+          </p>
+        </nuxt-link>
+        <p class="description">
+          {{ notification.text }}
         </p>
       </div>
-      <div class="actions">
-        <button @click="declineInvite(invite.team_id)">Decline</button>
-        <button @click="acceptInvite(invite.team_id)">Accept</button>
+      <div v-if="notification.actions.length > 0" class="actions">
+        <button
+          v-for="(action, index) in notification.actions"
+          :key="index"
+          @click="performAction(notification, index)"
+        >
+          {{ action.title }}
+        </button>
+      </div>
+      <div v-else class="actions">
+        <button @click="performAction(notification, null)">Dismiss</button>
       </div>
     </div>
   </DashboardPage>
@@ -34,89 +61,51 @@ export default {
       },
     }
 
-    const teams = (
+    const notifications = (
       await axios.get(
-        `https://api.modrinth.com/api/v1/user/${data.$auth.user.id}/teams`,
+        `https://api.modrinth.com/api/v1/user/${data.$auth.user.id}/notifications`,
         config
       )
-    ).data.filter((it) => !it.accepted)
-
-    const members = (
-      await Promise.all(
-        teams.map((it) =>
-          axios.get(
-            `https://api.modrinth.com/api/v1/team/${it.team_id}/members`,
-            config
-          )
-        )
-      )
-    ).map((it) => it.data)
-
-    const invites = []
-
-    for (const member of members) {
-      const owner = member.find((it) => it.role === 'Owner')
-
-      const ownerData = (
-        await axios.get(
-          `https://api.modrinth.com/api/v1/user/${owner.user_id}`,
-          config
-        )
-      ).data
-
-      invites.push({
-        team_id: owner.team_id,
-        username: ownerData.username,
-      })
-    }
+    ).data
 
     return {
-      invites,
+      notifications,
     }
   },
   methods: {
-    async acceptInvite(teamId) {
-      const config = {
-        headers: {
-          Authorization: this.$auth.getToken('local'),
-        },
-      }
-
+    async performAction(notification, index) {
       this.$nuxt.$loading.start()
 
       try {
-        await axios.post(
-          `https://api.modrinth.com/api/v1/team/${teamId}/join`,
-          {},
-          config
-        )
-        await this.$router.go(null)
-      } catch (err) {
-        this.$notify({
-          group: 'main',
-          title: 'An Error Occurred',
-          text: err.response.data.description,
-          type: 'error',
-        })
-      }
+        if (index) {
+          const config = {
+            method: Object.keys(
+              notification.actions[index].action_route
+            )[0].toLowerCase(),
+            url: `https://api.modrinth.com/api/v1/${
+              Object.values(notification.actions[index].action_route)[0]
+            }`,
+            headers: {
+              Authorization: this.$auth.getToken('local'),
+            },
+          }
 
-      this.$nuxt.$loading.finish()
-    },
-    async declineInvite(teamId) {
-      const config = {
-        headers: {
-          Authorization: this.$auth.getToken('local'),
-        },
-      }
+          await axios(config)
+        }
 
-      this.$nuxt.$loading.start()
+        const config = {
+          headers: {
+            Authorization: this.$auth.getToken('local')
+              ? this.$auth.getToken('local')
+              : '',
+          },
+        }
 
-      try {
         await axios.delete(
-          `https://api.modrinth.com/api/v1/team/${teamId}/members/${this.$auth.user.id}`,
+          `https://api.modrinth.com/api/v1/notification/${notification.id}`,
           config
         )
-        await this.$router.go(null)
+        await this.$router.replace('/' + notification.link)
       } catch (err) {
         this.$notify({
           group: 'main',
@@ -133,13 +122,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.invite {
+.notification {
   @extend %card;
   padding: var(--spacing-card-sm) var(--spacing-card-lg);
   margin-bottom: var(--spacing-card-sm);
   align-items: center;
   justify-content: space-between;
 
+  .text {
+    .top-wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      .title {
+        font-size: var(--font-size-lg);
+        margin: 0 0.5rem 0 0;
+      }
+    }
+  }
+
   p {
     margin: 0;
   }