Merge branch 'feature/sets-catalog'

ai/backend-context.md

@@ -50,6 +50,9 @@ intentionally unclaimed; the built-in health endpoint is `/up`.
   through additional repositories.
 - Test use-case branches at the use-case seam. Do not repeat every branch in
   controller or HTTP tests.
+- Keep deletion behavior tests in the relevant deletion use-case suite. Do
+  not test deletion policy through entity, repository, or database-constraint
+  tests.
 - Plain entities, value objects, use cases, middleware, and controller units
   should extend `PHPUnit\Framework\TestCase` when they do not need Laravel.
 - Extend `Tests\TestCase` only when a test needs Laravel's container, facades,

backend/app/Http/Controllers/SetController.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Set\Set;
+use App\Set\UseCases\ListSets\ListSets;
+use Illuminate\Http\JsonResponse;
+
+class SetController extends Controller
+{
+    public function __construct(
+        private ListSets $listSets,
+    ) {}
+
+    public function index(): JsonResponse
+    {
+        $sets = array_map(function (Set $set): array {
+            return [
+                'id' => $set->getId(),
+                'name' => $set->getName(),
+            ];
+        }, $this->listSets->execute());
+
+        return new JsonResponse(['sets' => $sets]);
+    }
+}

backend/app/Providers/AppServiceProvider.php

@@ -16,6 +16,8 @@ use App\Email\Emailer;
 use App\Email\EmailFactory;
 use App\Email\LaravelEmailer;
 use App\Email\LaravelEmailFactory;
+use App\Set\EloquentSetRepository;
+use App\Set\SetRepository;
 use App\User\EloquentUserRepository;
 use App\User\UserRepository;
 use Carbon\CarbonImmutable;
@@ -45,6 +47,10 @@ class AppServiceProvider extends ServiceProvider
         );
         $this->app->bind(Emailer::class, LaravelEmailer::class);
         $this->app->bind(EmailFactory::class, LaravelEmailFactory::class);
+        $this->app->bind(
+            SetRepository::class,
+            EloquentSetRepository::class,
+        );
         $this->app->bind(PasswordHasher::class, BcryptPasswordHasher::class);
         $this->app->bind(TokenGenerator::class, RandomTokenGenerator::class);
         $this->app->bind(Clock::class, SystemClock::class);

backend/app/Set/CreateSetDto.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Set;
+
+use App\User\User;
+
+final readonly class CreateSetDto
+{
+    public function __construct(
+        public string $name,
+        public User $creator,
+    ) {}
+}

backend/app/Set/EloquentSetRepository.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Set;
+
+use App\User\UserRepository;
+use RuntimeException;
+
+class EloquentSetRepository implements SetRepository
+{
+    public function __construct(
+        private UserRepository $userRepository,
+    ) {}
+
+    public function create(CreateSetDto $dto): Set
+    {
+        $model = SetModel::create([
+            'name' => $dto->name,
+            'creator_id' => $dto->creator->getId(),
+        ]);
+
+        return new Set(
+            id: $model->id,
+            name: $model->name,
+            creator: $dto->creator,
+        );
+    }
+
+    public function all(): array
+    {
+        $models = SetModel::query()
+            ->orderBy('name')
+            ->orderBy('id')
+            ->get();
+        $sets = [];
+
+        foreach ($models as $model) {
+            $sets[] = $this->toDomain($model);
+        }
+
+        return $sets;
+    }
+
+    private function toDomain(SetModel $model): Set
+    {
+        $creator = $this->userRepository->find($model->creator_id);
+        if ($creator === null) {
+            throw new RuntimeException('set creator not found');
+        }
+
+        return new Set(
+            id: $model->id,
+            name: $model->name,
+            creator: $creator,
+        );
+    }
+}

backend/app/Set/Set.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Set;
+
+use App\User\User;
+
+final readonly class Set
+{
+    public function __construct(
+        private int $id,
+        private string $name,
+        private User $creator,
+    ) {}
+
+    public function getId(): int
+    {
+        return $this->id;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function getCreator(): User
+    {
+        return $this->creator;
+    }
+}

backend/app/Set/SetModel.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Set;
+
+use Illuminate\Database\Eloquent\Attributes\Fillable;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Model;
+
+/**
+ * @property int $id
+ * @property string $name
+ * @property int $creator_id
+ *
+ * @method static Builder<static>|SetModel newModelQuery()
+ * @method static Builder<static>|SetModel newQuery()
+ * @method static Builder<static>|SetModel query()
+ *
+ * @mixin \Eloquent
+ */
+#[Fillable(['name', 'creator_id'])]
+class SetModel extends Model
+{
+    protected $table = 'sets';
+
+    public $timestamps = false;
+}

backend/app/Set/SetRepository.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Set;
+
+interface SetRepository
+{
+    public function create(CreateSetDto $dto): Set;
+
+    /**
+     * @return list<Set>
+     */
+    public function all(): array;
+}

backend/app/Set/UseCases/ListSets/ListSets.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Set\UseCases\ListSets;
+
+use App\Set\Set;
+use App\Set\SetRepository;
+
+class ListSets
+{
+    public function __construct(
+        private SetRepository $setRepository,
+    ) {}
+
+    /**
+     * @return list<Set>
+     */
+    public function execute(): array
+    {
+        return $this->setRepository->all();
+    }
+}

backend/database/migrations/2026_08_03_000000_create_sets_table.php

@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('sets', function (Blueprint $table): void {
+            $table->id();
+            $table->string('name')->unique();
+            $table->foreignId('creator_id')
+                ->constrained('users')
+                ->restrictOnDelete();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('sets');
+    }
+};

backend/database/seeders/DatabaseSeeder.php

@@ -12,5 +12,6 @@ class DatabaseSeeder extends Seeder
     public function run(): void
     {
         $this->call(UserSeeder::class);
+        $this->call(SetSeeder::class);
     }
 }

backend/database/seeders/SetSeeder.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Set\CreateSetDto;
+use App\Set\SetRepository;
+use App\Shared\ValueObject\EmailAddress;
+use App\User\UserRepository;
+use Illuminate\Database\Seeder;
+use RuntimeException;
+
+class SetSeeder extends Seeder
+{
+    private const array NAMES = [
+        'Bible',
+        'Course',
+        'Fitness Program',
+    ];
+
+    public function run(): void
+    {
+        $user = app(UserRepository::class)->findByEmail(
+            new EmailAddress(UserSeeder::EMAIL),
+        );
+        if ($user === null) {
+            throw new RuntimeException('seeded user not found');
+        }
+
+        $repository = app(SetRepository::class);
+        $existingNames = array_map(function ($set): string {
+            return $set->getName();
+        }, $repository->all());
+
+        foreach (self::NAMES as $name) {
+            if (in_array($name, $existingNames, true)) {
+                continue;
+            }
+
+            $repository->create(new CreateSetDto(
+                name: $name,
+                creator: $user,
+            ));
+        }
+    }
+}

backend/routes/api.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\AuthController;
+use App\Http\Controllers\SetController;
 use App\Http\Middleware\AuthMiddleware;
 use Illuminate\Support\Facades\Route;
 
@@ -10,5 +11,6 @@ Route::post('/confirm-email', [AuthController::class, 'confirmEmail']);
 
 Route::middleware(AuthMiddleware::class)->group(function (): void {
     Route::get('/me', [AuthController::class, 'me']);
+    Route::get('/sets', [SetController::class, 'index']);
     Route::post('/logout', [AuthController::class, 'logout']);
 });

backend/tests/Fakes/FakeSetRepository.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace Tests\Fakes;
+
+use App\Set\CreateSetDto;
+use App\Set\Set;
+use App\Set\SetRepository;
+
+class FakeSetRepository implements SetRepository
+{
+    /**
+     * @var array<int, Set>
+     */
+    private array $sets = [];
+
+    public function create(CreateSetDto $dto): Set
+    {
+        $id = count($this->sets) + 1;
+        $set = new Set(
+            id: $id,
+            name: $dto->name,
+            creator: $dto->creator,
+        );
+        $this->sets[$id] = $set;
+
+        return $this->copy($set);
+    }
+
+    public function all(): array
+    {
+        $sets = array_values($this->sets);
+        usort($sets, function (Set $first, Set $second): int {
+            return $first->getName() <=> $second->getName();
+        });
+
+        return array_map(function (Set $set): Set {
+            return $this->copy($set);
+        }, $sets);
+    }
+
+    private function copy(Set $set): Set
+    {
+        return new Set(
+            id: $set->getId(),
+            name: $set->getName(),
+            creator: $set->getCreator(),
+        );
+    }
+}

backend/tests/Feature/Database/DatabaseSeederTest.php

@@ -3,8 +3,10 @@
 namespace Tests\Feature\Database;
 
 use App\Auth\PasswordHasher;
+use App\Set\SetRepository;
 use App\Shared\ValueObject\EmailAddress;
 use App\User\UserRepository;
+use Database\Seeders\UserSeeder;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Tests\TestCase;
 
@@ -36,4 +38,26 @@ class DatabaseSeederTest extends TestCase
             $user->getPasswordHash(),
         ));
     }
+
+    public function test_it_seeds_the_available_sets_idempotently(): void
+    {
+        $this->seed();
+        $this->seed();
+
+        $sets = app(SetRepository::class)->all();
+
+        $this->assertDatabaseCount('sets', 3);
+        $this->assertSame(
+            ['Bible', 'Course', 'Fitness Program'],
+            array_map(function ($set): string {
+                return $set->getName();
+            }, $sets),
+        );
+        foreach ($sets as $set) {
+            $this->assertSame(
+                UserSeeder::EMAIL,
+                $set->getCreator()->getEmail()->value(),
+            );
+        }
+    }
 }

backend/tests/Feature/Set/EloquentSetRepositoryTest.php

@@ -0,0 +1,93 @@
+<?php
+
+namespace Tests\Feature\Set;
+
+use App\Set\CreateSetDto;
+use App\Set\SetRepository;
+use App\Shared\ValueObject\EmailAddress;
+use App\User\CreateUserDto;
+use App\User\User;
+use App\User\UserRepository;
+use Illuminate\Database\QueryException;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class EloquentSetRepositoryTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_it_creates_sets_with_their_creator(): void
+    {
+        $creator = $this->createUser('creator@example.com');
+        $set = app(SetRepository::class)->create(new CreateSetDto(
+            name: 'Bible',
+            creator: $creator,
+        ));
+
+        $this->assertGreaterThan(0, $set->getId());
+        $this->assertSame('Bible', $set->getName());
+        $this->assertSame($creator->getId(), $set->getCreator()->getId());
+        $this->assertDatabaseHas('sets', [
+            'id' => $set->getId(),
+            'name' => 'Bible',
+            'creator_id' => $creator->getId(),
+        ]);
+    }
+
+    public function test_it_lists_every_set_alphabetically(): void
+    {
+        $firstCreator = $this->createUser('first@example.com');
+        $secondCreator = $this->createUser('second@example.com');
+        $repository = app(SetRepository::class);
+        $repository->create(new CreateSetDto(
+            name: 'Fitness Program',
+            creator: $firstCreator,
+        ));
+        $repository->create(new CreateSetDto(
+            name: 'Bible',
+            creator: $secondCreator,
+        ));
+        $repository->create(new CreateSetDto(
+            name: 'Course',
+            creator: $firstCreator,
+        ));
+
+        $sets = $repository->all();
+
+        $this->assertSame(
+            ['Bible', 'Course', 'Fitness Program'],
+            array_map(function ($set): string {
+                return $set->getName();
+            }, $sets),
+        );
+        $this->assertSame(
+            $secondCreator->getId(),
+            $sets[0]->getCreator()->getId(),
+        );
+    }
+
+    public function test_it_rejects_duplicate_set_names(): void
+    {
+        $creator = $this->createUser('creator@example.com');
+        $repository = app(SetRepository::class);
+        $repository->create(new CreateSetDto(
+            name: 'Bible',
+            creator: $creator,
+        ));
+
+        $this->expectException(QueryException::class);
+
+        $repository->create(new CreateSetDto(
+            name: 'Bible',
+            creator: $creator,
+        ));
+    }
+
+    private function createUser(string $email): User
+    {
+        return app(UserRepository::class)->create(new CreateUserDto(
+            email: new EmailAddress($email),
+            passwordHash: 'hashed-password',
+        ));
+    }
+}

backend/tests/Feature/Set/ListSetsEndpointTest.php

@@ -0,0 +1,102 @@
+<?php
+
+namespace Tests\Feature\Set;
+
+use App\Auth\CreateSessionDto;
+use App\Auth\SessionRepository;
+use App\Http\Middleware\AuthMiddleware;
+use App\Set\CreateSetDto;
+use App\Set\SetRepository;
+use App\Shared\ValueObject\EmailAddress;
+use App\User\CreateUserDto;
+use App\User\User;
+use App\User\UserRepository;
+use DateTimeImmutable;
+use DateTimeZone;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class ListSetsEndpointTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_it_returns_every_set_without_creator_details(): void
+    {
+        $authenticatedUser = $this->createUser('reader@example.com');
+        $otherUser = $this->createUser('creator@example.com');
+        $repository = app(SetRepository::class);
+        $course = $repository->create(new CreateSetDto(
+            name: 'Course',
+            creator: $authenticatedUser,
+        ));
+        $bible = $repository->create(new CreateSetDto(
+            name: 'Bible',
+            creator: $otherUser,
+        ));
+        $this->createSession($authenticatedUser);
+
+        $response = $this->withCredentials()
+            ->withUnencryptedCookie(
+                AuthMiddleware::COOKIE_NAME,
+                'valid-token',
+            )->getJson('/api/sets');
+
+        $response->assertOk()->assertExactJson([
+            'sets' => [
+                [
+                    'id' => $bible->getId(),
+                    'name' => 'Bible',
+                ],
+                [
+                    'id' => $course->getId(),
+                    'name' => 'Course',
+                ],
+            ],
+        ]);
+    }
+
+    public function test_it_returns_an_empty_catalog(): void
+    {
+        $authenticatedUser = $this->createUser('reader@example.com');
+        $this->createSession($authenticatedUser);
+
+        $response = $this->withCredentials()
+            ->withUnencryptedCookie(
+                AuthMiddleware::COOKIE_NAME,
+                'valid-token',
+            )->getJson('/api/sets');
+
+        $response->assertOk()->assertExactJson(['sets' => []]);
+    }
+
+    public function test_it_rejects_an_unauthenticated_request(): void
+    {
+        $response = $this->getJson('/api/sets');
+
+        $response
+            ->assertStatus(401)
+            ->assertExactJson(['error' => 'unauthenticated']);
+    }
+
+    private function createUser(string $email): User
+    {
+        return app(UserRepository::class)->create(new CreateUserDto(
+            email: new EmailAddress($email),
+            passwordHash: 'hashed-password',
+        ));
+    }
+
+    private function createSession(User $user): void
+    {
+        $createdAt = new DateTimeImmutable(
+            '2026-08-03T12:00:00',
+            new DateTimeZone('UTC'),
+        );
+        app(SessionRepository::class)->create(new CreateSessionDto(
+            token: 'valid-token',
+            user: $user,
+            createdAt: $createdAt,
+            expiresAt: $createdAt->modify('+7 days'),
+        ));
+    }
+}

backend/tests/Unit/Set/SetTest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Tests\Unit\Set;
+
+use App\Set\Set;
+use App\Shared\ValueObject\EmailAddress;
+use App\User\User;
+use PHPUnit\Framework\TestCase;
+
+class SetTest extends TestCase
+{
+    public function test_it_exposes_its_identity_name_and_creator(): void
+    {
+        $creator = new User(
+            id: 7,
+            email: new EmailAddress('creator@example.com'),
+            passwordHash: 'hashed-password',
+        );
+        $set = new Set(
+            id: 42,
+            name: 'Bible',
+            creator: $creator,
+        );
+
+        $this->assertSame(42, $set->getId());
+        $this->assertSame('Bible', $set->getName());
+        $this->assertSame($creator, $set->getCreator());
+    }
+}

backend/tests/Unit/Set/UseCases/ListSetsTest.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace Tests\Unit\Set\UseCases;
+
+use App\Set\CreateSetDto;
+use App\Set\UseCases\ListSets\ListSets;
+use App\Shared\ValueObject\EmailAddress;
+use App\User\User;
+use PHPUnit\Framework\TestCase;
+use Tests\Fakes\FakeSetRepository;
+
+class ListSetsTest extends TestCase
+{
+    public function test_it_lists_every_available_set_alphabetically(): void
+    {
+        $creator = new User(
+            id: 7,
+            email: new EmailAddress('creator@example.com'),
+            passwordHash: 'hashed-password',
+        );
+        $repository = new FakeSetRepository;
+        $repository->create(new CreateSetDto(
+            name: 'Course',
+            creator: $creator,
+        ));
+        $repository->create(new CreateSetDto(
+            name: 'Bible',
+            creator: $creator,
+        ));
+
+        $sets = (new ListSets($repository))->execute();
+
+        $this->assertSame(
+            ['Bible', 'Course'],
+            array_map(function ($set): string {
+                return $set->getName();
+            }, $sets),
+        );
+    }
+}

frontend/website/cypress/e2e/confirm-email.cy.ts

@@ -9,6 +9,10 @@ describe('email confirmation', () => {
       statusCode: 401,
       body: { error: 'unauthenticated' },
     }).as('me')
+    cy.intercept('GET', '**/api/sets', {
+      statusCode: 200,
+      body: { sets: [] },
+    })
   })
 
   it('chooses a password, confirms the account, and opens the dashboard', () => {
@@ -31,7 +35,7 @@ describe('email confirmation', () => {
     cy.wait('@confirmEmail')
 
     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('validates password length and confirmation before submitting', () => {

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', () => {

frontend/website/cypress/e2e/sets-dashboard.cy.ts

@@ -0,0 +1,120 @@
+const authenticatedUser = {
+  id: 7,
+  email: 'user@example.com',
+}
+
+function interceptAuthenticatedUser(): void {
+  cy.intercept('GET', '**/api/me', {
+    statusCode: 200,
+    body: { user: authenticatedUser },
+  }).as('me')
+}
+
+describe('sets dashboard', () => {
+  beforeEach(() => {
+    interceptAuthenticatedUser()
+  })
+
+  it('shows every available set by name', () => {
+    cy.intercept('GET', '**/api/sets', (request) => {
+      expect(request.headers.accept).to.equal('application/json')
+      request.reply({
+        statusCode: 200,
+        body: {
+          sets: [
+            { id: 41, name: 'Bible' },
+            { id: 58, name: 'Course' },
+            { id: 92, name: 'Fitness Program' },
+          ],
+        },
+      })
+    }).as('sets')
+
+    cy.visit('/dashboard')
+    cy.wait('@me')
+    cy.wait('@sets')
+
+    cy.get('h1').should('have.text', 'Available sets')
+    cy.get('ul[aria-label="Available sets"] h2').then(($headings) => {
+      expect([...$headings].map((heading) => heading.textContent)).to.deep.equal([
+        'Bible',
+        'Course',
+        'Fitness Program',
+      ])
+    })
+    cy.get('ul[aria-label="Available sets"]')
+      .should('not.contain.text', '41')
+      .and('not.contain.text', '58')
+      .and('not.contain.text', '92')
+      .find('a, button')
+      .should('not.exist')
+  })
+
+  it('shows loading and empty catalog states', () => {
+    cy.intercept('GET', '**/api/sets', {
+      delay: 500,
+      statusCode: 200,
+      body: { sets: [] },
+    }).as('sets')
+
+    cy.visit('/dashboard')
+    cy.wait('@me')
+    cy.get('[role="status"]').should('have.text', 'Loading sets...')
+    cy.wait('@sets')
+
+    cy.get('[role="status"]').should(
+      'contain.text',
+      'No sets are available yet.',
+    )
+  })
+
+  it('shows malformed catalog responses as errors', () => {
+    cy.intercept('GET', '**/api/sets', {
+      statusCode: 200,
+      body: { sets: [{ id: 41, name: 12 }] },
+    }).as('sets')
+
+    cy.visit('/dashboard')
+    cy.wait('@me')
+    cy.wait('@sets')
+
+    cy.get('[role="alert"]').should(
+      'contain.text',
+      "We couldn't load the available sets.",
+    )
+  })
+
+  it('retries after a catalog request fails', () => {
+    let requestCount = 0
+    cy.intercept('GET', '**/api/sets', (request) => {
+      requestCount += 1
+      request.alias = `sets${requestCount}`
+
+      if (requestCount === 1) {
+        request.reply({ statusCode: 500 })
+        return
+      }
+
+      request.reply({
+        statusCode: 200,
+        body: { sets: [{ id: 41, name: 'Bible' }] },
+      })
+    })
+
+    cy.visit('/dashboard')
+    cy.wait('@me')
+    cy.wait('@sets1')
+
+    cy.get('[role="alert"]').should(
+      'contain.text',
+      "We couldn't load the available sets.",
+    )
+    cy.contains('button', 'Try again').click()
+    cy.wait('@sets2')
+
+    cy.get('ul[aria-label="Available sets"] h2').should(
+      'have.text',
+      'Bible',
+    )
+  })
+})

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,
+  }
+})

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>