frontend/src/app/features/about/about-page.component.html

@@ -49,7 +49,9 @@
               }
               <img
                 [src]="image.source.fallbackUrl"
-                [attr.alt]="image.altText || ('ABOUT.MEMBER_JOE_ALT' | translate)"
+                [attr.alt]="
+                  image.altText || ('ABOUT.MEMBER_JOE_ALT' | translate)
+                "
               />
             </picture>
           }

frontend/src/app/features/admin/pages/admin-home-media.component.scss

@@ -214,7 +214,7 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--space-2);
   margin-top: var(--space-2);
-  margin-bottom: var(--space-3)
+  margin-bottom: var(--space-3);
 }
 
 .form-field {

frontend/src/app/features/admin/pages/admin-home-media.component.ts

@@ -145,7 +145,10 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
   }
 
   get activeImageCount(): number {
-    return this.sections.reduce((total, section) => total + section.items.length, 0);
+    return this.sections.reduce(
+      (total, section) => total + section.items.length,
+      0,
+    );
   }
 
   ngOnInit(): void {
@@ -170,11 +173,13 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
           items: this.buildSectionItems(assets, config),
         }));
         this.loading = false;
-        (Object.keys(this.formStateByKey) as HomeSectionKey[]).forEach((key) => {
+        (Object.keys(this.formStateByKey) as HomeSectionKey[]).forEach(
-          if (!this.formStateByKey[key].saving) {
+          (key) => {
-            this.resetForm(key);
+            if (!this.formStateByKey[key].saving) {
-          }
+              this.resetForm(key);
-        });
+            }
+          },
+        );
       },
       error: (error) => {
         this.loading = false;
@@ -236,7 +241,9 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
     this.errorMessage = null;
     this.successMessage = null;
 
-    const createUsagePayload = (mediaAssetId: string): AdminCreateMediaUsagePayload => ({
+    const createUsagePayload = (
+      mediaAssetId: string,
+    ): AdminCreateMediaUsagePayload => ({
       usageType: section.usageType,
       usageKey: section.usageKey,
       mediaAssetId,
@@ -259,10 +266,13 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
           if (!formState.replacingUsageId) {
             return of(null);
           }
-          return this.adminMediaService.updateUsage(formState.replacingUsageId, {
+          return this.adminMediaService.updateUsage(
-            isActive: false,
+            formState.replacingUsageId,
-            isPrimary: false,
+            {
-          });
+              isActive: false,
+              isPrimary: false,
+            },
+          );
         }),
       )
       .subscribe({
@@ -371,7 +381,9 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
     return this.actingUsageIds.has(usageId);
   }
 
-  getSectionsForGroup(groupId: HomeMediaSectionGroup['id']): HomeMediaSectionView[] {
+  getSectionsForGroup(
+    groupId: HomeMediaSectionGroup['id'],
+  ): HomeMediaSectionView[] {
     return this.sections.filter((section) => section.groupId === groupId);
   }
 
@@ -455,8 +467,7 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
   private resetForm(sectionKey: HomeSectionKey): void {
     const formState = this.getFormState(sectionKey);
     const section = this.sections.find((item) => item.usageKey === sectionKey);
-    const nextSortOrder =
+    const nextSortOrder = (section?.items.at(-1)?.sortOrder ?? -1) + 1;
-      (section?.items.at(-1)?.sortOrder ?? -1) + 1;
 
     this.revokePreviewUrl(formState.previewUrl);
     this.formStateByKey[sectionKey] = {

frontend/src/app/features/home/home.component.html

@@ -207,7 +207,9 @@
               <img
                 class="about-feature-photo"
                 [src]="image.source.fallbackUrl"
-                [attr.alt]="image.altText || ('HOME.SEC_ABOUT_TITLE' | translate)"
+                [attr.alt]="
+                  image.altText || ('HOME.SEC_ABOUT_TITLE' | translate)
+                "
                 width="1200"
                 height="900"
               />

frontend/src/app/features/home/home.component.ts

@@ -117,21 +117,20 @@ export class HomeComponent {
         ),
   );
 
-  readonly founderImages = computed<readonly PublicMediaDisplayImage[]>(
+  readonly founderImages = computed<readonly PublicMediaDisplayImage[]>(() =>
-    () =>
+    (
-      (
+      this.mediaByUsage()[
-        this.mediaByUsage()[
+        buildPublicMediaUsageScopeKey('HOME_SECTION', 'founders-gallery')
-          buildPublicMediaUsageScopeKey('HOME_SECTION', 'founders-gallery')
+      ] ?? []
-        ] ?? []
+    )
+      .map((item: PublicMediaImage) =>
+        this.publicMediaService.toDisplayImage(item, 'hero'),
       )
-        .map((item: PublicMediaImage) =>
+      .filter(
-          this.publicMediaService.toDisplayImage(item, 'hero'),
+        (
-        )
+          item: PublicMediaDisplayImage | null,
-        .filter(
+        ): item is PublicMediaDisplayImage => item !== null,
-          (
+      ),
-            item: PublicMediaDisplayImage | null,
-          ): item is PublicMediaDisplayImage => item !== null,
-        ),
   );
 
   readonly capabilityCards = computed<readonly HomeCapabilityCard[]>(() =>
@@ -139,13 +138,15 @@ export class HomeComponent {
   );
 
   readonly founderImageIndex = signal(0);
-  readonly currentFounderImage = computed<PublicMediaDisplayImage | null>(() => {
+  readonly currentFounderImage = computed<PublicMediaDisplayImage | null>(
-    const images = this.founderImages();
+    () => {
-    if (images.length === 0) {
+      const images = this.founderImages();
-      return null;
+      if (images.length === 0) {
-    }
+        return null;
-    return images[this.founderImageIndex()] ?? images[0] ?? null;
+      }
-  });
+      return images[this.founderImageIndex()] ?? images[0] ?? null;
+    },
+  );
 
   constructor() {
     effect(() => {