add 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(),

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>