show sets on dashboard

frontend/website/src/views/DashboardView.vue

@@ -1,12 +1,21 @@
 <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' })
@@ -15,18 +24,39 @@ async function handleLogout(): Promise<void> {
 
 <template>
   <main class="dashboard-page">
-    <header>
+    <header class="dashboard-header">
       <BrandWordmark theme="dark" />
       <button type="button" class="logout-button" @click="handleLogout">Log out</button>
     </header>
 
-    <section>
-      <p>Dashboard</p>
-      <h1>Your next step starts here.</h1>
-      <span>
-        Your goals and today&apos;s assignments will appear here once account authentication is
-        connected.
-      </span>
+    <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>
@@ -40,7 +70,7 @@ async function handleLogout(): Promise<void> {
   background: #f4f1e7;
 }
 
-header {
+.dashboard-header {
   display: flex;
   width: min(100%, 76rem);
   align-items: center;
@@ -76,13 +106,16 @@ header {
   outline-offset: 0.25rem;
 }
 
-section {
-  width: min(100%, 42rem);
-  margin: clamp(6rem, 18vh, 12rem) auto 0;
-  text-align: center;
+.sets-catalog {
+  width: min(100%, 72rem);
+  margin: clamp(4.5rem, 10vh, 7rem) auto 0;
 }
 
-section p {
+.sets-catalog__introduction {
+  max-width: 44rem;
+}
+
+.sets-catalog__eyebrow {
   margin: 0 0 1rem;
   color: #926044;
   font-size: 0.72rem;
@@ -94,17 +127,112 @@ section p {
 h1 {
   margin: 0;
   font-family: Georgia, 'Times New Roman', serif;
-  font-size: clamp(3rem, 7vw, 5rem);
+  font-size: clamp(3rem, 7vw, 5.25rem);
   font-weight: 500;
   line-height: 1;
   letter-spacing: -0.055em;
 }
 
-section span {
-  display: block;
-  max-width: 34rem;
-  margin: 1.5rem auto 0;
+.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>