Add transfer history and unify back elements with breadcrumbs (#1088)

* Add transfer history and unify back elements with breadcrumbs

* Increase padding of breadcrumbs, include previous query params, more consistent link underlining

* Prettier

* Add project type text and link to project pages

* Remove console.log

pages/dashboard/projects.vue

@@ -232,7 +232,7 @@
               <nuxt-link
                 tabindex="-1"
                 :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
-                  project.slug
+                  project.slug ? project.slug : project.id
                 }`"
               >
                 <Avatar
@@ -254,7 +254,7 @@
                 <nuxt-link
                   class="hover-link wrap-as-needed"
                   :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
-                    project.slug
+                    project.slug ? project.slug : project.id
                   }`"
                 >
                   {{ project.title }}
@@ -278,7 +278,7 @@
               <nuxt-link
                 class="square-button"
                 :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
-                  project.slug
+                  project.slug ? project.slug : project.id
                 }/settings`"
               >
                 <SettingsIcon />

pages/dashboard/revenue/index.vue

@@ -26,6 +26,9 @@
             <TransferIcon /> Transfer to
             {{ $formatWallet(auth.user.payout_data.payout_wallet) }}
           </button>
+          <NuxtLink class="iconified-button" to="/dashboard/revenue/transfers">
+            <HistoryIcon /> View transfer history
+          </NuxtLink>
           <NuxtLink class="iconified-button" to="/settings/monetization">
             <SettingsIcon /> Monetization settings
           </NuxtLink>
@@ -90,10 +93,11 @@
 <script>
 import TransferIcon from '~/assets/images/utils/transfer.svg'
 import SettingsIcon from '~/assets/images/utils/settings.svg'
+import HistoryIcon from '~/assets/images/utils/history.svg'
 import ModalTransfer from '~/components/ui/ModalTransfer'
 
 export default defineNuxtComponent({
-  components: { TransferIcon, SettingsIcon, ModalTransfer },
+  components: { TransferIcon, SettingsIcon, HistoryIcon, ModalTransfer },
   async setup() {
     const auth = await useAuth()
 

pages/dashboard/revenue/transfers.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <section class="universal-card payout-history">
+      <Breadcrumbs
+        current-title="Transfer history"
+        :link-stack="[{ href: '/dashboard/revenue', label: 'Revenue' }]"
+      />
+      <h2>Transfer history</h2>
+      <p>
+        All of your transfers from your Modrinth balance to your PayPal or Venmo accounts will be
+        listed here:
+      </p>
+      <div class="grid-table">
+        <div class="grid-table__row grid-table__header">
+          <div class="desktop">Date</div>
+          <div class="desktop">Status</div>
+          <div class="desktop">Amount</div>
+          <div class="mobile">Transaction</div>
+        </div>
+        <div
+          v-for="(payout, index) in payouts.payouts.filter((x) => x.status === 'success')"
+          :key="`payout-${index}`"
+          class="grid-table__row"
+        >
+          <div>{{ $dayjs(payout.created).format('MMMM D, YYYY [at] h:mm A') }}</div>
+          <div><Badge :type="payout.status" /></div>
+          <div class="amount">{{ $formatMoney(payout.amount) }}</div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script setup>
+import Badge from '~/components/ui/Badge.vue'
+import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+
+useHead({
+  title: 'Transfer history - Modrinth',
+})
+
+const auth = await useAuth()
+const app = useNuxtApp()
+
+const [raw] = await Promise.all([
+  useBaseFetch(`user/${auth.value.user.id}/payouts`, app.$defaultHeaders()),
+])
+
+const payouts = ref(raw)
+</script>
+<style lang="scss" scoped>
+.grid-table {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  border-radius: var(--size-rounded-sm);
+  overflow: hidden;
+  margin-top: var(--spacing-card-md);
+
+  .grid-table__header {
+    .mobile {
+      display: none;
+    }
+  }
+
+  .grid-table__row {
+    display: contents;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: var(--spacing-card-sm);
+
+      // Left edge of table
+      &:first-child,
+      &.mobile {
+        padding-left: var(--spacing-card-bg);
+      }
+
+      // Right edge of table
+      &:last-child {
+        padding-right: var(--spacing-card-bg);
+      }
+    }
+
+    &:nth-child(2n + 1) > div {
+      background-color: var(--color-table-alternate-row);
+    }
+
+    > div {
+      padding-top: var(--spacing-card-bg);
+      padding-bottom: var(--spacing-card-bg);
+    }
+
+    &.grid-table__header > div {
+      background-color: var(--color-bg);
+      font-weight: bold;
+      color: var(--color-text-dark);
+    }
+  }
+
+  @media screen and (max-width: 560px) {
+    display: flex;
+    flex-direction: column;
+    .grid-table__row {
+      display: flex;
+      flex-direction: column;
+
+      > div {
+        padding: var(--spacing-card-xs) var(--spacing-card-bg);
+
+        &:first-child,
+        &.mobile {
+          padding-top: var(--spacing-card-bg);
+        }
+
+        &:last-child,
+        &.mobile {
+          padding-bottom: var(--spacing-card-bg);
+        }
+      }
+    }
+
+    .grid-table__header {
+      .mobile {
+        display: flex;
+      }
+      .desktop {
+        display: none;
+      }
+    }
+  }
+
+  .amount {
+    color: var(--color-heading);
+    font-weight: 500;
+  }
+}
+</style>