Merge branch 'element-icons'

backend/app/Controllers/ElementController.php

@@ -46,6 +46,7 @@ class ElementController
                 'id' => $element->getId(),
                 'title' => $element->getTitle(),
                 'description' => $element->getDescription(),
+                'iconImageUrl' => $element->getIconImageUrl(),
                 'richText' => $element->getRichText(),
                 'pdfPath' => $element->getPdfPath(),
                 'youtubeUrl' => $element->getYoutubeUrl(),

backend/app/Element/CreateElementDto.php

@@ -10,6 +10,7 @@ class CreateElementDto
         public Set $set,
         public string $title,
         public string $description,
+        public ?string $iconImageUrl,
         public string $richText,
         public ?string $pdfPath,
         public ?string $youtubeUrl,

backend/app/Element/Element.php

@@ -10,6 +10,7 @@ class Element
         private int $id,
         private string $title,
         private string $description,
+        private ?string $iconImageUrl,
         private string $richText,
         private ?string $pdfPath,
         private ?string $youtubeUrl,
@@ -33,6 +34,11 @@ class Element
         return $this->description;
     }
 
+    public function getIconImageUrl(): ?string
+    {
+        return $this->iconImageUrl;
+    }
+
     public function getRichText(): string
     {
         return $this->richText;

backend/app/Element/ElementModel.php

@@ -10,6 +10,7 @@ use Illuminate\Database\Eloquent\Model;
  * @property int $set_id
  * @property string $title
  * @property string $description
+ * @property string|null $icon_image_url
  * @property string $rich_text
  * @property string|null $pdf_path
  * @property string|null $youtube_url
@@ -23,6 +24,7 @@ use Illuminate\Database\Eloquent\Model;
  * @method static Builder<static>|ElementModel whereSetId($value)
  * @method static Builder<static>|ElementModel whereTitle($value)
  * @method static Builder<static>|ElementModel whereDescription($value)
+ * @method static Builder<static>|ElementModel whereIconImageUrl($value)
  * @method static Builder<static>|ElementModel whereRichText($value)
  * @method static Builder<static>|ElementModel wherePdfPath($value)
  * @method static Builder<static>|ElementModel whereYoutubeUrl($value)
@@ -39,6 +41,7 @@ class ElementModel extends Model
         'set_id',
         'title',
         'description',
+        'icon_image_url',
         'rich_text',
         'pdf_path',
         'youtube_url',

backend/app/Element/EloquentElementRepository.php

@@ -18,6 +18,7 @@ class EloquentElementRepository implements ElementRepository
             'set_id' => $dto->set->getId(),
             'title' => $dto->title,
             'description' => $dto->description,
+            'icon_image_url' => $dto->iconImageUrl,
             'rich_text' => $dto->richText,
             'pdf_path' => $dto->pdfPath,
             'youtube_url' => $dto->youtubeUrl,
@@ -28,6 +29,7 @@ class EloquentElementRepository implements ElementRepository
             id: $model->id,
             title: $dto->title,
             description: $dto->description,
+            iconImageUrl: $dto->iconImageUrl,
             richText: $dto->richText,
             pdfPath: $dto->pdfPath,
             youtubeUrl: $dto->youtubeUrl,
@@ -111,6 +113,7 @@ class EloquentElementRepository implements ElementRepository
             id: $model->id,
             title: $model->title,
             description: $model->description,
+            iconImageUrl: $model->icon_image_url,
             richText: $model->rich_text,
             pdfPath: $model->pdf_path,
             youtubeUrl: $model->youtube_url,

backend/app/Element/UseCases/CreateElement/CreateElement.php

@@ -31,6 +31,9 @@ class CreateElement
             throw new BadRequestException('title is required');
         }
         $description = $request->description ?? '';
+        $iconImageUrl = $request->iconImageUrl === ''
+            ? null
+            : $request->iconImageUrl;
         $richText = $request->richText ?? '';
         $pdfPath = $request->pdfPath === '' ? null : $request->pdfPath;
         $youtubeUrl = $request->youtubeUrl === ''
@@ -51,6 +54,7 @@ class CreateElement
                 set: $set,
                 title: $request->title,
                 description: $description,
+                iconImageUrl: $iconImageUrl,
                 richText: $richText,
                 pdfPath: $pdfPath,
                 youtubeUrl: $youtubeUrl,
@@ -76,6 +80,7 @@ class CreateElement
             set: $set,
             title: $request->title,
             description: $description,
+            iconImageUrl: $iconImageUrl,
             richText: $richText,
             pdfPath: $pdfPath,
             youtubeUrl: $youtubeUrl,

backend/app/Element/UseCases/CreateElement/CreateElementRequest.php

@@ -8,6 +8,7 @@ class CreateElementRequest
         public ?int $setId,
         public ?string $title,
         public ?string $description,
+        public ?string $iconImageUrl,
         public ?string $richText,
         public ?string $pdfPath,
         public ?string $youtubeUrl,

backend/database/migrations/2026_05_24_000001_elements_table.php

@@ -13,6 +13,7 @@ return new class extends Migration
             $table->foreignId('set_id')->constrained('sets');
             $table->string('title');
             $table->text('description')->default('');
+            $table->string('icon_image_url')->nullable();
             $table->text('rich_text')->default('');
             $table->string('pdf_path')->nullable();
             $table->string('youtube_url')->nullable();

backend/database/seeders/ElementSeeder.php

@@ -18,6 +18,7 @@ class ElementSeeder extends Seeder
             set: $baderechSet,
             title: $baderechSet->getName(),
             description: $baderechSet->getDescription(),
+            iconImageUrl: '/assets/baderech-haavodah-icon.png',
             richText: '<p>Begin with a clear map for avodah growth.</p>'
                 . '<p><strong>Move steadily</strong> from awareness '
                 . 'to practice.</p>',
@@ -31,6 +32,7 @@ class ElementSeeder extends Seeder
             title: 'Avodah Foundations',
             description: 'Core foundations for building a steady '
                 . 'avodah practice.',
+            iconImageUrl: null,
             richText: '<p>Avodah foundations begin with honest awareness '
                 . 'and small repeatable steps.</p>',
             pdfPath: null,
@@ -41,6 +43,7 @@ class ElementSeeder extends Seeder
             set: $baderechSet,
             title: 'Daily Practice',
             description: 'Practical steps for consistent daily growth.',
+            iconImageUrl: null,
             richText: '<p>Daily practice turns inspiration into a '
                 . 'dependable rhythm.</p>',
             pdfPath: null,

backend/tests/Fakes/FakeElementRepository.php

@@ -21,6 +21,7 @@ class FakeElementRepository implements ElementRepository
             id: $id,
             title: $dto->title,
             description: $dto->description,
+            iconImageUrl: $dto->iconImageUrl,
             richText: $dto->richText,
             pdfPath: $dto->pdfPath,
             youtubeUrl: $dto->youtubeUrl,
@@ -100,6 +101,7 @@ class FakeElementRepository implements ElementRepository
             id: $element->getId(),
             title: $element->getTitle(),
             description: $element->getDescription(),
+            iconImageUrl: $element->getIconImageUrl(),
             richText: $element->getRichText(),
             pdfPath: $element->getPdfPath(),
             youtubeUrl: $element->getYoutubeUrl(),

backend/tests/Feature/ElementsEndpointTest.php

@@ -28,6 +28,7 @@ class ElementsEndpointTest extends TestCase
             set: $set,
             title: 'Baderech HaAvodah',
             description: 'A structured path for growth',
+            iconImageUrl: '/assets/baderech-haavodah-icon.png',
             richText: '<p>A structured path for growth</p>',
             pdfPath: '/assets/pdfs/baderech.pdf',
             youtubeUrl: $sampleYoutubeUrl,
@@ -37,6 +38,7 @@ class ElementsEndpointTest extends TestCase
             set: $set,
             title: 'Avodah Foundations',
             description: 'Foundations for steady avodah',
+            iconImageUrl: null,
             richText: '<p>Foundations rich text</p>',
             pdfPath: '/assets/pdfs/foundations.pdf',
             youtubeUrl: null,
@@ -46,6 +48,7 @@ class ElementsEndpointTest extends TestCase
             set: $set,
             title: 'Daily Practice',
             description: 'Daily practices for growth',
+            iconImageUrl: null,
             richText: '<p>Daily practice rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -72,6 +75,7 @@ class ElementsEndpointTest extends TestCase
                 'id' => $element->getId(),
                 'title' => 'Baderech HaAvodah',
                 'description' => 'A structured path for growth',
+                'iconImageUrl' => '/assets/baderech-haavodah-icon.png',
                 'richText' => '<p>A structured path for growth</p>',
                 'pdfPath' => '/assets/pdfs/baderech.pdf',
                 'youtubeUrl' => $sampleYoutubeUrl,

backend/tests/Feature/SetsEndpointTest.php

@@ -32,6 +32,7 @@ class SetsEndpointTest extends TestCase
                 set: $baderechSet,
                 title: $baderechSet->getName(),
                 description: $baderechSet->getDescription(),
+                iconImageUrl: null,
                 richText: '',
                 pdfPath: null,
                 youtubeUrl: null,

backend/tests/Unit/Controllers/ElementControllerTest.php

@@ -30,6 +30,7 @@ class ElementControllerTest extends TestCase
             $set,
             'Baderech HaAvodah',
             'A structured path for growth',
+            '/assets/baderech-icon.png',
             '<p>A structured path for growth</p>',
             '/assets/pdfs/baderech.pdf',
             'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
@@ -39,6 +40,7 @@ class ElementControllerTest extends TestCase
             $set,
             'Avodah Foundations',
             'Foundations for steady avodah',
+            null,
             '<p>Foundations rich text</p>',
             '/assets/pdfs/foundations.pdf',
             null,
@@ -48,6 +50,7 @@ class ElementControllerTest extends TestCase
             $set,
             'Daily Practice',
             'Daily practices for growth',
+            null,
             '<p>Daily practice rich text</p>',
             null,
             null,
@@ -68,6 +71,10 @@ class ElementControllerTest extends TestCase
             '<p>A structured path for growth</p>',
             $body['element']['richText'],
         );
+        $this->assertSame(
+            '/assets/baderech-icon.png',
+            $body['element']['iconImageUrl'],
+        );
         $this->assertSame(
             '/assets/pdfs/baderech.pdf',
             $body['element']['pdfPath'],
@@ -126,6 +133,7 @@ class ElementControllerTest extends TestCase
         DomainSet $set,
         string $title,
         string $description,
+        ?string $iconImageUrl,
         string $richText,
         ?string $pdfPath,
         ?string $youtubeUrl,
@@ -135,6 +143,7 @@ class ElementControllerTest extends TestCase
             set: $set,
             title: $title,
             description: $description,
+            iconImageUrl: $iconImageUrl,
             richText: $richText,
             pdfPath: $pdfPath,
             youtubeUrl: $youtubeUrl,

backend/tests/Unit/Element/ElementTest.php

@@ -20,6 +20,7 @@ class ElementTest extends TestCase
             id: 1,
             title: 'Root',
             description: 'Root description',
+            iconImageUrl: null,
             richText: '<p>Root rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -30,6 +31,7 @@ class ElementTest extends TestCase
             id: 2,
             title: 'Child',
             description: 'Child description',
+            iconImageUrl: '/assets/child-icon.svg',
             richText: '<p>Child rich text</p>',
             pdfPath: '/assets/pdfs/child.pdf',
             youtubeUrl: 'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
@@ -43,6 +45,10 @@ class ElementTest extends TestCase
             'Child description',
             $childElement->getDescription(),
         );
+        $this->assertSame(
+            '/assets/child-icon.svg',
+            $childElement->getIconImageUrl(),
+        );
         $this->assertSame(
             '<p>Child rich text</p>',
             $childElement->getRichText(),
@@ -57,6 +63,7 @@ class ElementTest extends TestCase
         );
         $this->assertSame($set, $childElement->getSet());
         $this->assertSame($rootElement, $childElement->getParentElement());
+        $this->assertNull($rootElement->getIconImageUrl());
         $this->assertNull($rootElement->getPdfPath());
         $this->assertNull($rootElement->getYoutubeUrl());
         $this->assertNull($rootElement->getParentElement());

backend/tests/Unit/Element/UseCases/CreateElementTest.php

@@ -48,6 +48,7 @@ class CreateElementTest extends TestCase
             setId: $set->getId(),
             title: 'Root',
             description: 'Root description',
+            iconImageUrl: '/assets/root-icon.svg',
             richText: '<p>Root rich text</p>',
             pdfPath: '/assets/pdfs/root.pdf',
             youtubeUrl: 'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
@@ -57,6 +58,10 @@ class CreateElementTest extends TestCase
         $this->assertInstanceOf(Element::class, $element);
         $this->assertSame('Root', $element->getTitle());
         $this->assertSame('Root description', $element->getDescription());
+        $this->assertSame(
+            '/assets/root-icon.svg',
+            $element->getIconImageUrl(),
+        );
         $this->assertSame('<p>Root rich text</p>', $element->getRichText());
         $this->assertSame('/assets/pdfs/root.pdf', $element->getPdfPath());
         $this->assertSame(
@@ -75,6 +80,7 @@ class CreateElementTest extends TestCase
                 setId: $set->getId(),
                 title: 'Root',
                 description: 'Root description',
+                iconImageUrl: null,
                 richText: '<p>Root rich text</p>',
                 pdfPath: null,
                 youtubeUrl: null,
@@ -87,6 +93,7 @@ class CreateElementTest extends TestCase
                 setId: $set->getId(),
                 title: 'Child',
                 description: 'Child description',
+                iconImageUrl: '/assets/child-icon.svg',
                 richText: '<p>Child rich text</p>',
                 pdfPath: '/assets/pdfs/child.pdf',
                 youtubeUrl: 'https://youtu.be/yHx-r4p6hHU',
@@ -99,6 +106,10 @@ class CreateElementTest extends TestCase
             'Child description',
             $childElement->getDescription(),
         );
+        $this->assertSame(
+            '/assets/child-icon.svg',
+            $childElement->getIconImageUrl(),
+        );
         $this->assertSame(
             '<p>Child rich text</p>',
             $childElement->getRichText(),
@@ -125,6 +136,7 @@ class CreateElementTest extends TestCase
             setId: $set->getId(),
             title: 'Root',
             description: null,
+            iconImageUrl: null,
             richText: null,
             pdfPath: null,
             youtubeUrl: null,
@@ -132,11 +144,30 @@ class CreateElementTest extends TestCase
         ));
 
         $this->assertSame('', $element->getDescription());
+        $this->assertNull($element->getIconImageUrl());
         $this->assertSame('', $element->getRichText());
         $this->assertNull($element->getPdfPath());
         $this->assertNull($element->getYoutubeUrl());
     }
 
+    public function testCreatesElementWithNullIconImageUrlWhenBlank(): void
+    {
+        $set = $this->createSet('Daily learning');
+
+        $element = $this->createElement->execute(new CreateElementRequest(
+            setId: $set->getId(),
+            title: 'Root',
+            description: 'Root description',
+            iconImageUrl: '',
+            richText: '<p>Root rich text</p>',
+            pdfPath: null,
+            youtubeUrl: null,
+            parentElementId: null,
+        ));
+
+        $this->assertNull($element->getIconImageUrl());
+    }
+
     public function testCreatesElementWithNullPdfPathWhenBlank(): void
     {
         $set = $this->createSet('Daily learning');
@@ -145,6 +176,7 @@ class CreateElementTest extends TestCase
             setId: $set->getId(),
             title: 'Root',
             description: 'Root description',
+            iconImageUrl: null,
             richText: '<p>Root rich text</p>',
             pdfPath: '',
             youtubeUrl: null,
@@ -162,6 +194,7 @@ class CreateElementTest extends TestCase
             setId: $set->getId(),
             title: 'Root',
             description: 'Root description',
+            iconImageUrl: null,
             richText: '<p>Root rich text</p>',
             pdfPath: null,
             youtubeUrl: '',
@@ -180,6 +213,7 @@ class CreateElementTest extends TestCase
             setId: null,
             title: 'Root',
             description: 'Root description',
+            iconImageUrl: null,
             richText: '<p>Root rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -196,6 +230,7 @@ class CreateElementTest extends TestCase
             setId: 1,
             title: null,
             description: 'Root description',
+            iconImageUrl: null,
             richText: '<p>Root rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -212,6 +247,7 @@ class CreateElementTest extends TestCase
             setId: 99,
             title: 'Root',
             description: 'Root description',
+            iconImageUrl: null,
             richText: '<p>Root rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -232,6 +268,7 @@ class CreateElementTest extends TestCase
             setId: $set->getId(),
             title: 'Child',
             description: 'Child description',
+            iconImageUrl: null,
             richText: '<p>Child rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -246,6 +283,7 @@ class CreateElementTest extends TestCase
             setId: $set->getId(),
             title: 'Root',
             description: 'Root description',
+            iconImageUrl: null,
             richText: '<p>Root rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -261,6 +299,7 @@ class CreateElementTest extends TestCase
             setId: $set->getId(),
             title: 'Another root',
             description: 'Another root description',
+            iconImageUrl: null,
             richText: '<p>Another root rich text</p>',
             pdfPath: null,
             youtubeUrl: null,
@@ -277,6 +316,7 @@ class CreateElementTest extends TestCase
                 setId: $parentSet->getId(),
                 title: 'Parent root',
                 description: 'Parent root description',
+                iconImageUrl: null,
                 richText: '<p>Parent root rich text</p>',
                 pdfPath: null,
                 youtubeUrl: null,
@@ -293,6 +333,7 @@ class CreateElementTest extends TestCase
             setId: $childSet->getId(),
             title: 'Invalid child',
             description: 'Invalid child description',
+            iconImageUrl: null,
             richText: '<p>Invalid child rich text</p>',
             pdfPath: null,
             youtubeUrl: null,

backend/tests/Unit/Element/UseCases/GetElementTest.php

@@ -31,6 +31,7 @@ class GetElementTest extends TestCase
             $set,
             'Baderech HaAvodah',
             'A structured path for growth',
+            '/assets/baderech-icon.png',
             '<p>A structured path for growth</p>',
             '/assets/pdfs/baderech.pdf',
             'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
@@ -49,6 +50,10 @@ class GetElementTest extends TestCase
             'A structured path for growth',
             $foundElement->getDescription(),
         );
+        $this->assertSame(
+            '/assets/baderech-icon.png',
+            $foundElement->getIconImageUrl(),
+        );
         $this->assertSame(
             '<p>A structured path for growth</p>',
             $foundElement->getRichText(),
@@ -70,6 +75,7 @@ class GetElementTest extends TestCase
             $set,
             'Baderech HaAvodah',
             'A structured path for growth',
+            null,
             '<p>A structured path for growth</p>',
             '/assets/pdfs/baderech.pdf',
             null,
@@ -79,6 +85,7 @@ class GetElementTest extends TestCase
             $set,
             'Avodah Foundations',
             'Foundations for steady avodah',
+            null,
             '<p>Foundations rich text</p>',
             '/assets/pdfs/foundations.pdf',
             null,
@@ -88,6 +95,7 @@ class GetElementTest extends TestCase
             $set,
             'Daily Practice',
             'Daily practices for growth',
+            null,
             '<p>Daily practice rich text</p>',
             null,
             null,
@@ -97,6 +105,7 @@ class GetElementTest extends TestCase
             $set,
             'Nested Practice',
             'Nested description',
+            null,
             '<p>Nested rich text</p>',
             null,
             null,
@@ -107,6 +116,7 @@ class GetElementTest extends TestCase
             $otherSet,
             'Other Parent',
             'Other parent description',
+            null,
             '<p>Other parent rich text</p>',
             null,
             null,
@@ -116,6 +126,7 @@ class GetElementTest extends TestCase
             $otherSet,
             'Other Child',
             'Other child description',
+            null,
             '<p>Other child rich text</p>',
             null,
             null,
@@ -178,6 +189,7 @@ class GetElementTest extends TestCase
         DomainSet $set,
         string $title,
         string $description,
+        ?string $iconImageUrl,
         string $richText,
         ?string $pdfPath,
         ?string $youtubeUrl,
@@ -187,6 +199,7 @@ class GetElementTest extends TestCase
             set: $set,
             title: $title,
             description: $description,
+            iconImageUrl: $iconImageUrl,
             richText: $richText,
             pdfPath: $pdfPath,
             youtubeUrl: $youtubeUrl,

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

@@ -41,6 +41,10 @@ describe('media page sets', () => {
     cy.location('pathname').should('eq', '/element/1')
     cy.get('[data-cy="element-page"]').should('be.visible')
     cy.contains('h1', 'Baderech HaAvodah').should('be.visible')
+    cy.get('[data-cy="element-icon"]')
+      .should('be.visible')
+      .and('have.attr', 'src')
+      .and('include', '/assets/baderech-haavodah-icon.png')
     cy.get('[data-cy="element-rich-text"]').within(() => {
       cy.contains('Begin with a clear map for avodah growth.')
         .should('be.visible')
@@ -82,6 +86,7 @@ describe('media page sets', () => {
       .click()
     cy.location('pathname').should('eq', '/element/2')
     cy.contains('h1', 'Avodah Foundations').should('be.visible')
+    cy.get('[data-cy="element-icon"]').should('not.exist')
     cy.get('[data-cy="element-rich-text"]')
       .should(
         'contain.text',

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -8,6 +8,7 @@ export interface ChildElement {
 }
 
 export interface Element extends ChildElement {
+  iconImageUrl: string | null
   richText: string
   pdfPath: string | null
   youtubeUrl: string | null

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -211,6 +211,14 @@ function isShortYoutubeHost(hostname: string): boolean {
         {{ error }}
       </p>
       <section v-else-if="element" class="element-page__content">
+        <img
+          v-if="element.iconImageUrl !== null"
+          :src="element.iconImageUrl"
+          :alt="`${element.title} icon`"
+          class="element-page__icon"
+          data-cy="element-icon"
+        />
+
         <h1 class="element-page__heading">
           {{ element.title }}
         </h1>
@@ -296,6 +304,14 @@ function isShortYoutubeHost(hostname: string): boolean {
   margin: 0 auto;
 }
 
+.element-page__icon {
+  display: block;
+  width: 132px;
+  height: 132px;
+  margin: 0 auto 1.8rem;
+  object-fit: contain;
+}
+
 .element-page__heading {
   margin: 0;
   color: #2c2c2c;
@@ -459,5 +475,11 @@ function isShortYoutubeHost(hostname: string): boolean {
   .element-page__children {
     margin-top: 2rem;
   }
+
+  .element-page__icon {
+    width: 108px;
+    height: 108px;
+    margin-bottom: 1.4rem;
+  }
 }
 </style>