From 321c1b7bb01f0c1123b14e128d6e528b34e18371 Mon Sep 17 00:00:00 2001
From: Yisroel Baum <yisroel.d.baum@gmail.com>
Date: Mon, 3 Aug 2026 20:31:59 +0300
Subject: [PATCH] show sets on dashboard

---
 .../website/cypress/e2e/session-auth.cy.ts    |   9 +-
 .../website/cypress/e2e/sets-dashboard.cy.ts  |   2 +-
 frontend/website/src/stores/sets.ts           |  65 +++++++
 frontend/website/src/views/DashboardView.vue  | 166 ++++++++++++++++--
 4 files changed, 221 insertions(+), 21 deletions(-)
 create mode 100644 frontend/website/src/stores/sets.ts

diff --git a/frontend/website/cypress/e2e/session-auth.cy.ts b/frontend/website/cypress/e2e/session-auth.cy.ts
index cd35dfd..defb942 100644
--- a/frontend/website/cypress/e2e/session-auth.cy.ts
+++ b/frontend/website/cypress/e2e/session-auth.cy.ts
@@ -38,6 +38,13 @@ function visitDashboardAndLogout(): void {
 }
 
 describe('session authentication', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '**/api/sets', {
+      statusCode: 200,
+      body: { sets: [] },
+    })
+  })
+
   it('restores an authenticated session on a protected route', () => {
     cy.intercept('GET', '**/api/me', {
       statusCode: 200,
@@ -48,7 +55,7 @@ describe('session authentication', () => {
     cy.wait('@me')
 
     cy.location('pathname').should('equal', '/dashboard')
-    cy.get('h1').should('have.text', 'Your next step starts here.')
+    cy.get('h1').should('have.text', 'Available sets')
   })
 
   it('redirects an unauthenticated protected route to login', () => {
diff --git a/frontend/website/cypress/e2e/sets-dashboard.cy.ts b/frontend/website/cypress/e2e/sets-dashboard.cy.ts
index 7e3bbca..3872b10 100644
--- a/frontend/website/cypress/e2e/sets-dashboard.cy.ts
+++ b/frontend/website/cypress/e2e/sets-dashboard.cy.ts
@@ -63,7 +63,7 @@ describe('sets dashboard', () => {
     cy.wait('@sets')
 
     cy.get('[role="status"]').should(
-      'have.text',
+      'contain.text',
       'No sets are available yet.',
     )
   })
diff --git a/frontend/website/src/stores/sets.ts b/frontend/website/src/stores/sets.ts
new file mode 100644
index 0000000..57b0bcc
--- /dev/null
+++ b/frontend/website/src/stores/sets.ts
@@ -0,0 +1,65 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { z } from 'zod'
+
+import { API_BASE } from '@/utils/apiBase'
+
+export const setSummarySchema = z.object({
+  id: z.number().int().positive(),
+  name: z.string().min(1),
+})
+
+const setsResponseSchema = z.object({
+  sets: z.array(setSummarySchema),
+})
+
+export type SetSummary = z.infer<typeof setSummarySchema>
+
+const LOAD_ERROR = "We couldn't load the available sets."
+
+export const useSetsStore = defineStore('sets', () => {
+  const sets = ref<SetSummary[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchSets(): Promise<boolean> {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await fetch(`${API_BASE}/api/sets`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+
+      if (response.status !== 200) {
+        sets.value = []
+        error.value = LOAD_ERROR
+
+        return false
+      }
+
+      const responseBody: unknown = await response.json()
+      sets.value = setsResponseSchema.parse(responseBody).sets
+
+      return true
+    } catch {
+      sets.value = []
+      error.value = LOAD_ERROR
+
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    sets,
+    loading,
+    error,
+    fetchSets,
+  }
+})
diff --git a/frontend/website/src/views/DashboardView.vue b/frontend/website/src/views/DashboardView.vue
index c61783f..182def5 100644
--- a/frontend/website/src/views/DashboardView.vue
+++ b/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>