Attainly/frontend/website/src/views/DashboardView.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

import BrandWordmark from '@/components/BrandWordmark.vue'
import { useAuthStore } from '@/stores/auth'
import { useSetsStore } from '@/stores/sets'

const authStore = useAuthStore()
const setsStore = useSetsStore()
const { sets, loading, error } = storeToRefs(setsStore)
const router = useRouter()

onMounted(async () => {
  await setsStore.fetchSets()
})

async function handleLogout(): Promise<void> {
  await authStore.logout()
  await router.push({ name: 'login' })
}
</script>

<template>
  <main class="dashboard-page">
    <header class="dashboard-header">
      <BrandWordmark theme="dark" />
      <button type="button" class="logout-button" @click="handleLogout">Log out</button>
    </header>

    <section class="sets-catalog" aria-labelledby="sets-heading">
      <div class="sets-catalog__introduction">
        <p class="sets-catalog__eyebrow">Your library</p>
        <h1 id="sets-heading">Available sets</h1>
        <p class="sets-catalog__description">
          Browse every set available in Attainly and find the collection that fits your next goal.
        </p>
      </div>

      <p v-if="loading" class="catalog-state" role="status">Loading sets...</p>

      <div v-else-if="error !== null" class="catalog-state catalog-state--error" role="alert">
        <p>{{ error }}</p>
        <button type="button" class="retry-button" @click="setsStore.fetchSets">Try again</button>
      </div>

      <p v-else-if="sets.length === 0" class="catalog-state" role="status">
        No sets are available yet.
      </p>

      <ul v-else class="set-grid" aria-label="Available sets">
        <li v-for="availableSet in sets" :key="availableSet.id">
          <article class="set-card">
            <p>Set</p>
            <h2>{{ availableSet.name }}</h2>
          </article>
        </li>
      </ul>
    </section>
  </main>
</template>

<style scoped>
.dashboard-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem clamp(1.5rem, 6vw, 5rem);
  color: #183029;
  background: #f4f1e7;
}

.dashboard-header {
  display: flex;
  width: min(100%, 76rem);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.logout-button {
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 0.7rem;
  color: #fffdf7;
  background: #183a31;
  box-shadow: 0 0.55rem 1.2rem rgb(24 58 49 / 14%);
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.logout-button:hover {
  background: #285c4e;
  box-shadow: 0 0.7rem 1.4rem rgb(24 58 49 / 18%);
  transform: translateY(-1px);
}

.logout-button:focus-visible {
  outline: 3px solid rgb(86 127 112 / 34%);
  outline-offset: 0.25rem;
}

.sets-catalog {
  width: min(100%, 72rem);
  margin: clamp(4.5rem, 10vh, 7rem) auto 0;
}

.sets-catalog__introduction {
  max-width: 44rem;
}

.sets-catalog__eyebrow {
  margin: 0 0 1rem;
  color: #926044;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 7vw, 5.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
}

.sets-catalog__description {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: #68776f;
  line-height: 1.7;
}

.catalog-state {
  width: 100%;
  min-height: 10rem;
  display: grid;
  place-items: center;
  margin: 3rem 0 0;
  padding: 2rem;
  border: 1px solid rgb(24 48 41 / 12%);
  border-radius: 1rem;
  color: #68776f;
  background: rgb(255 253 247 / 72%);
  text-align: center;
}

.catalog-state--error {
  align-content: center;
  gap: 1rem;
}

.catalog-state--error p {
  margin: 0;
}

.retry-button {
  min-height: 2.65rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgb(24 58 49 / 28%);
  border-radius: 0.7rem;
  color: #183a31;
  background: #fffdf7;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

.retry-button:hover {
  border-color: #285c4e;
  background: #f9f5e9;
}

.retry-button:focus-visible {
  outline: 3px solid rgb(86 127 112 / 34%);
  outline-offset: 0.25rem;
}

.set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.set-card {
  min-height: 11rem;
  padding: 1.6rem;
  border: 1px solid rgb(24 48 41 / 12%);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgb(255 253 247 / 96%), rgb(242 236 221 / 82%));
  box-shadow: 0 1rem 2.5rem rgb(40 62 52 / 8%);
}

.set-card p {
  margin: 0 0 2.4rem;
  color: #926044;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.set-card h2 {
  margin: 0;
  color: #183029;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

@media (max-width: 37.5rem) {
  .dashboard-page {
    padding: 1.4rem 1.1rem 2.5rem;
  }

  .sets-catalog {
    margin-top: 3.75rem;
  }

  .set-grid {
    margin-top: 2.25rem;
  }
}
</style>