Merge branch 'feature/element-card-links'

ai/shared.md

@@ -20,6 +20,13 @@ guides (`backend-context.md`, `frontend-context.md`) extend these.
    batch multiple behaviors into one failing-test commit and one
    implementation commit when they can be reviewed separately.
 
+## Runtime assumptions
+
+- Assume every process defined in `process-compose.yml` is already running
+  for local development and verification unless a command proves otherwise.
+  Do not start duplicate PostgreSQL, backend, or frontend processes just to
+  run checks.
+
 ## Code style
 
 - Lines should not exceed 80 columns, but should use up to 80 columns when

backend/app/Controllers/SetController.php

@@ -2,14 +2,17 @@
 
 namespace App\Controllers;
 
+use App\Element\ElementRepository;
 use App\Set\Set as DomainSet;
 use App\Set\SetRepository;
 use Illuminate\Http\JsonResponse;
 
 class SetController
 {
-    public function __construct(private SetRepository $setRepository)
+    public function __construct(
-    {
+        private SetRepository $setRepository,
+        private ElementRepository $elementRepository,
+    ) {
     }
 
     public function index(): JsonResponse
@@ -29,16 +32,20 @@ class SetController
      *     id: int,
      *     name: string,
      *     description: string,
-     *     iconImageUrl: string
+     *     iconImageUrl: string,
+     *     rootElementId: int|null
      * }
      */
     private function buildSetPayload(DomainSet $set): array
     {
+        $rootElement = $this->elementRepository->findRootBySet($set);
+
         return [
             'id' => $set->getId(),
             'name' => $set->getName(),
             'description' => $set->getDescription(),
             'iconImageUrl' => $set->getIconImageUrl(),
+            'rootElementId' => $rootElement?->getId(),
         ];
     }
 }

backend/app/Element/ElementRepository.php

@@ -10,6 +10,8 @@ interface ElementRepository
 
     public function find(int $id): ?Element;
 
+    public function findRootBySet(DomainSet $set): ?Element;
+
     /**
      * @return Element[]
      */

backend/app/Element/EloquentElementRepository.php

@@ -35,6 +35,16 @@ class EloquentElementRepository implements ElementRepository
         return $model === null ? null : $this->toDomain($model);
     }
 
+    public function findRootBySet(DomainSet $set): ?Element
+    {
+        $model = ElementModel::where('set_id', $set->getId())
+            ->whereNull('parent_element_id')
+            ->orderBy('id')
+            ->first();
+
+        return $model === null ? null : $this->toDomain($model);
+    }
+
     /**
      * @return Element[]
      */

backend/database/seeders/SetSeeder.php

@@ -11,14 +11,19 @@ class SetSeeder extends Seeder
     public function run(): void
     {
         $setRepository = app(SetRepository::class);
-        $title = 'Baderech HaAvodah';
+        $baderechTitle = 'Baderech HaAvodah';
 
-        $set = $setRepository->create(new CreateSetDto(
+        $setRepository->create(new CreateSetDto(
-            name: $title,
+            name: $baderechTitle,
             description: 'Baderech HaAvodah is a way of living - '
                 . 'a structured path for inner and outer growth, '
                 . 'spiritual refinement, and personal development.',
             iconImageUrl: '/assets/baderech-haavodah-icon.png',
         ));
+        $setRepository->create(new CreateSetDto(
+            name: 'Daily Learning',
+            description: 'Daily learning for steady growth',
+            iconImageUrl: '/assets/daily-learning-icon.svg',
+        ));
     }
 }

backend/tests/Fakes/FakeElementRepository.php

@@ -37,6 +37,20 @@ class FakeElementRepository implements ElementRepository
         return $this->cloneElement($this->elementsById[$id]);
     }
 
+    public function findRootBySet(DomainSet $set): ?Element
+    {
+        foreach ($this->elementsById as $element) {
+            if (
+                $element->getSet()->getId() === $set->getId()
+                && $element->getParentElement() === null
+            ) {
+                return $this->cloneElement($element);
+            }
+        }
+
+        return null;
+    }
+
     /**
      * @return Element[]
      */

backend/tests/Feature/SetsEndpointTest.php

@@ -2,6 +2,8 @@
 
 namespace Tests\Feature;
 
+use App\Element\CreateElementDto;
+use App\Element\ElementRepository;
 use App\Set\CreateSetDto;
 use App\Set\SetRepository;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -14,6 +16,7 @@ class SetsEndpointTest extends TestCase
     public function testReturnsAllSets(): void
     {
         $setRepository = app(SetRepository::class);
+        $elementRepository = app(ElementRepository::class);
         $baderechSet = $setRepository->create(new CreateSetDto(
             name: 'Baderech HaAvodah',
             description: 'Baderech HaAvodah is a way of living',
@@ -24,6 +27,13 @@ class SetsEndpointTest extends TestCase
             description: 'Daily learning for steady growth',
             iconImageUrl: '/assets/daily-learning-icon.svg',
         ));
+        $baderechRootElement = $elementRepository->create(
+            new CreateElementDto(
+                set: $baderechSet,
+                title: $baderechSet->getName(),
+                parentElement: null,
+            )
+        );
 
         $response = $this->getJson('/api/sets');
 
@@ -35,12 +45,14 @@ class SetsEndpointTest extends TestCase
                     'name' => $baderechSet->getName(),
                     'description' => $baderechSet->getDescription(),
                     'iconImageUrl' => $baderechSet->getIconImageUrl(),
+                    'rootElementId' => $baderechRootElement->getId(),
                 ],
                 [
                     'id' => $dailyLearningSet->getId(),
                     'name' => $dailyLearningSet->getName(),
                     'description' => $dailyLearningSet->getDescription(),
                     'iconImageUrl' => $dailyLearningSet->getIconImageUrl(),
+                    'rootElementId' => null,
                 ],
             ],
         ]);

frontend/rabbi_gerzi/cypress/e2e/media.cy.ts

@@ -11,8 +11,11 @@ describe('media page sets', () => {
     cy.contains('h1', 'Torah Media').should('be.visible')
     cy.get('[data-cy="media-set-grid"]').should('be.visible')
     cy.get('[data-cy="media-set-card"]', { timeout: 10000 })
-      .should('have.length', 1)
+      .should('have.length', 2)
-      .first()
+
+    cy.contains('[data-cy="media-set-card"]', 'Baderech HaAvodah')
+      .as('baderechCard')
+      .should('have.attr', 'href', '/element/1')
       .within(() => {
         cy.get('img[data-cy="media-set-icon"]')
           .should('be.visible')
@@ -22,5 +25,21 @@ describe('media page sets', () => {
         cy.contains('a structured path for inner and outer growth')
           .should('be.visible')
       })
+
+    cy.contains('[data-cy="media-set-card"]', 'Daily Learning')
+      .as('dailyLearningCard')
+      .should('match', 'article')
+      .and('not.have.attr', 'href')
+
+    cy.get('@dailyLearningCard')
+      .within(() => {
+        cy.contains('h2', 'Daily Learning').should('be.visible')
+        cy.contains('Daily learning for steady growth').should('be.visible')
+      })
+
+    cy.get('@baderechCard').click()
+    cy.location('pathname').should('eq', '/element/1')
+    cy.get('[data-cy="element-page"]').should('be.visible')
+    cy.contains('h1', 'Element 1').should('be.visible')
   })
 })

frontend/rabbi_gerzi/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '@/views/HomePage.vue'
 import LoginPage from '@/views/LoginPage.vue'
 import MediaPage from '@/views/MediaPage.vue'
+import ElementPage from '@/views/ElementPage.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -21,6 +22,11 @@ const router = createRouter({
       name: 'media',
       component: MediaPage,
     },
+    {
+      path: '/element/:id',
+      name: 'element',
+      component: ElementPage,
+    },
   ],
 })
 

frontend/rabbi_gerzi/src/stores/mediaSets.ts

@@ -6,6 +6,7 @@ export interface MediaSet {
   name: string
   description: string
   iconImageUrl: string
+  rootElementId: number | null
 }
 
 interface SetsResponse {

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import SiteHeader from '@/components/SiteHeader.vue'
+
+const route = useRoute()
+
+const elementId = computed(() => {
+  const routeElementId = route.params.id
+
+  if (Array.isArray(routeElementId)) {
+    return routeElementId.join('/')
+  }
+
+  return routeElementId
+})
+</script>
+
+<template>
+  <div class="element-page">
+    <SiteHeader />
+    <main class="element-page__main" data-cy="element-page">
+      <h1 class="element-page__heading">Element {{ elementId }}</h1>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.element-page {
+  min-height: 100vh;
+  background: var(--color-white);
+}
+
+.element-page__main {
+  min-height: 100vh;
+  padding: 5.1rem 4.15rem 5rem;
+}
+
+.element-page__heading {
+  margin: 0;
+  color: #2c2c2c;
+  font-family: var(--font-serif);
+  font-size: clamp(2.6rem, 4.8vw, 3.2rem);
+  font-weight: 400;
+  line-height: 1.1;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .element-page__main {
+    padding: 3rem 1rem;
+  }
+}
+</style>

frontend/rabbi_gerzi/src/views/MediaPage.vue

@@ -33,23 +33,41 @@ onMounted(() => {
           No media sets are available yet.
         </p>
         <div v-else class="media-page__grid" data-cy="media-set-grid">
-          <article
+          <template v-for="mediaSet in sets" :key="mediaSet.id">
-            v-for="mediaSet in sets"
+            <RouterLink
-            :key="mediaSet.id"
+              v-if="mediaSet.rootElementId !== null"
-            class="media-page__card"
+              :to="{ name: 'element', params: { id: mediaSet.rootElementId } }"
-            data-cy="media-set-card"
+              class="media-page__card"
-          >
+              data-cy="media-set-card"
-            <img
+            >
-              :src="mediaSet.iconImageUrl"
+              <img
-              :alt="`${mediaSet.name} icon`"
+                :src="mediaSet.iconImageUrl"
-              class="media-page__card-icon"
+                :alt="`${mediaSet.name} icon`"
-              data-cy="media-set-icon"
+                class="media-page__card-icon"
-            />
+                data-cy="media-set-icon"
-            <h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
+              />
-            <p class="media-page__card-description">
+              <h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
-              {{ mediaSet.description }}
+              <p class="media-page__card-description">
-            </p>
+                {{ mediaSet.description }}
-          </article>
+              </p>
+            </RouterLink>
+            <article
+              v-else
+              class="media-page__card media-page__card--disabled"
+              data-cy="media-set-card"
+            >
+              <img
+                :src="mediaSet.iconImageUrl"
+                :alt="`${mediaSet.name} icon`"
+                class="media-page__card-icon"
+                data-cy="media-set-icon"
+              />
+              <h2 class="media-page__card-title">{{ mediaSet.name }}</h2>
+              <p class="media-page__card-description">
+                {{ mediaSet.description }}
+              </p>
+            </article>
+          </template>
         </div>
       </section>
     </main>
@@ -114,7 +132,29 @@ onMounted(() => {
   background: var(--color-white);
   border: 1px solid #e5cf9f;
   border-radius: 17px;
+  color: inherit;
   text-align: center;
+  text-decoration: none;
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+a.media-page__card:hover,
+a.media-page__card:focus-visible {
+  border-color: #d4ad5f;
+  box-shadow: 0 14px 35px rgb(44 44 44 / 10%);
+  transform: translateY(-2px);
+}
+
+a.media-page__card:focus-visible {
+  outline: 3px solid rgb(212 173 95 / 45%);
+  outline-offset: 4px;
+}
+
+.media-page__card--disabled {
+  opacity: 0.72;
 }
 
 .media-page__card-icon {