From b05278c061b0bb174a37c4d9e5e9b3e89371913b Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Fri, 17 Jul 2026 17:52:43 +0400
Subject: [PATCH] fix(footer): stop generating collision-prone social-link ids,
 fragile track key

createSocialLinkRow derived the new id from the current array length
(social-${length+1}). Add/remove/add cycles reliably reproduce a duplicate
id: add,add -> social-1/social-2; remove social-1 -> array length 1; add
-> social-2 again, colliding with the surviving row. footer.component.html
tracks footer nav items by id (@for ... track item.id), so a duplicate id
there corrupts Angular's DOM reuse on the public storefront footer.

Also switched the payment-icon @for from track icon.src to track $index -
two icon rows sharing a src (most commonly two blank ones) hit the same bug.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/components/footer/footer.component.html              | 2 +-
 .../project-editor/sections/footer-section.component.ts      | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
index 7bb2300..4db67ec 100644
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -28,7 +28,7 @@
       <div class="app-footer__group">
         <h4>{{ 'footer.payment' | translate }}</h4>
         <div class="app-footer__payments">
-          @for (icon of paymentIcons(); track icon.src) {
+          @for (icon of paymentIcons(); track $index) {
             <img [src]="icon.src" [alt]="icon.alt" loading="lazy" [width]="icon.width" [height]="icon.height" />
           }
         </div>
diff --git a/src/app/features/project-editor/sections/footer-section.component.ts b/src/app/features/project-editor/sections/footer-section.component.ts
index 1e356d5..de18716 100644
--- a/src/app/features/project-editor/sections/footer-section.component.ts
+++ b/src/app/features/project-editor/sections/footer-section.component.ts
@@ -46,10 +46,7 @@ export class ProjectEditorFooterSectionComponent {
 
   readonly createPaymentIconRow = (): FooterPaymentIconConfig => ({ src: '', alt: '' });
 
-  readonly createSocialLinkRow = (): FooterSocialLinkConfig => {
-    const index = (this.bootstrap()?.footer?.socialLinks?.length ?? 0) + 1;
-    return { id: `social-${index}`, label: '', url: '' };
-  };
+  readonly createSocialLinkRow = (): FooterSocialLinkConfig => ({ id: `social-${Date.now()}`, label: '', url: '' });
 
   updateCompanyName(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, companyName: value } })); }
   updateAddress(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, address: { ...current.company.address, street: value } } })); }