fix(project-editor): validate footer payment/social links, add footer logo picker

- header-section: raw checkboxes -> app-toggle, wrap in SectionCard
- footer-section: replace unvalidated pipe-delimited textareas for payment
  icons/social links with KeyValueEditor + MediaPickerComponent, add missing
  footer logo picker, validate social link URLs (http/https), wrap in SectionCard
- i18n: add footer logo / key-value-editor labels and URL validation message

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/features/project-editor/sections/footer-section.component.ts

@@ -4,11 +4,31 @@ import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { InputComponent } from '../../../shared/ui/input/input.component';
 import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
+import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
+import { KeyValueEditorComponent } from '../../../shared/ui/key-value-editor/key-value-editor.component';
+import { MediaPickerComponent } from '../../../shared/media/media-picker/media-picker.component';
+import { MediaAsset } from '../../../core/media/models/media-asset.model';
+import { FooterPaymentIconConfig, FooterSocialLinkConfig } from '../../../shared/models/config';
+
+/** Mirrors the HTTP_URL check in project-validator.service.ts (kept as a local duplicate: shared/ui must not import from features). */
+const HTTP_URL = /^https?:\/\/\S+$/;
+
+type FooterMediaTarget = 'logo' | { type: 'paymentIcon'; index: number };
 
 @Component({
   selector: 'app-project-editor-footer-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
+  imports: [
+    FormsModule,
+    TranslatePipe,
+    InputComponent,
+    FormFieldComponent,
+    ButtonComponent,
+    SectionCardComponent,
+    KeyValueEditorComponent,
+    MediaPickerComponent
+  ],
   templateUrl: './footer-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -16,35 +36,88 @@ import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.com
 export class ProjectEditorFooterSectionComponent {
   private readonly facade = inject(ProjectEditorFacade);
   readonly bootstrap = this.facade.bootstrap;
-  readonly paymentIconsValue = computed(() => (this.bootstrap()?.footer?.paymentIcons ?? []).map(icon => `${icon.src}|${icon.alt}`).join('\n'));
-  readonly socialLinksValue = computed(() => (this.bootstrap()?.footer?.socialLinks ?? []).map(link => `${link.id}|${link.label}|${link.url}`).join('\n'));
+
   readonly staticPagesValue = computed(() => (this.bootstrap()?.footer?.staticPageKeys ?? this.bootstrap()?.footer?.legalPageKeys ?? []).join(', '));
   readonly copyrightValue = computed(() => {
     const value = this.bootstrap()?.footer?.copyrightText;
     return typeof value === 'string' ? value : '';
   });
+  readonly paymentIconRows = computed<FooterPaymentIconConfig[]>(() => this.bootstrap()?.footer?.paymentIcons ?? []);
+  readonly socialLinkRows = computed<FooterSocialLinkConfig[]>(() => this.bootstrap()?.footer?.socialLinks ?? []);
+
+  protected mediaPickerOpen = false;
+  private mediaPickerTarget: FooterMediaTarget | null = null;
+
+  readonly createPaymentIconRow = (): FooterPaymentIconConfig => ({ src: '', alt: '' });
+
+  readonly createSocialLinkRow = (): FooterSocialLinkConfig => {
+    const index = (this.bootstrap()?.footer?.socialLinks?.length ?? 0) + 1;
+    return { id: `social-${index}`, 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 } } })); }
   updatePhone(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, phone: value } }, branding: { ...current.branding, supportPhone: value } })); }
   updateEmail(value: string): void { this.facade.updateBootstrap(current => ({ ...current, company: { ...current.company, contacts: { ...current.company.contacts, email: value } }, branding: { ...current.branding, supportEmail: value } })); }
   updateCopyright(value: string): void { this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, copyrightText: value } })); }
-  updatePaymentIcons(value: string): void {
-    const paymentIcons = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
-      const [src, alt] = line.split('|');
-      return { src: src?.trim() ?? '', alt: alt?.trim() ?? `icon-${index + 1}` };
-    });
-    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, paymentIcons } }));
-  }
-  updateSocialLinks(value: string): void {
-    const socialLinks = value.split('\n').map(line => line.trim()).filter(Boolean).map((line, index) => {
-      const [id, label, url] = line.split('|');
-      return { id: id?.trim() || `social-${index + 1}`, label: label?.trim() || '', url: url?.trim() || '' };
-    });
-    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, socialLinks } }));
-  }
   updateStaticPages(value: string): void {
     const staticPageKeys = value.split(',').map(item => item.trim()).filter(Boolean);
     this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, staticPageKeys, legalPageKeys: staticPageKeys } }));
   }
+
+  updateLogo(value: string): void {
+    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, logoUrl: value } }));
+  }
+
+  openLogoPicker(): void {
+    this.mediaPickerTarget = 'logo';
+    this.mediaPickerOpen = true;
+  }
+
+  openPaymentIconPicker(index: number): void {
+    this.mediaPickerTarget = { type: 'paymentIcon', index };
+    this.mediaPickerOpen = true;
+  }
+
+  onImagePicked(asset: MediaAsset): void {
+    const target = this.mediaPickerTarget;
+    if (target === 'logo') {
+      this.updateLogo(asset.url);
+    } else if (target?.type === 'paymentIcon') {
+      this.updatePaymentIconSrc(target.index, asset.url);
+    }
+    this.mediaPickerOpen = false;
+  }
+
+  onPaymentIconsChange(rows: FooterPaymentIconConfig[]): void {
+    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, paymentIcons: rows } }));
+  }
+
+  updatePaymentIconSrc(index: number, src: string): void {
+    const rows = this.paymentIconRows().map((row, i) => (i === index ? { ...row, src } : row));
+    this.onPaymentIconsChange(rows);
+  }
+
+  updatePaymentIconAlt(index: number, alt: string): void {
+    const rows = this.paymentIconRows().map((row, i) => (i === index ? { ...row, alt } : row));
+    this.onPaymentIconsChange(rows);
+  }
+
+  onSocialLinksChange(rows: FooterSocialLinkConfig[]): void {
+    this.facade.updateBootstrap(current => ({ ...current, footer: { ...current.footer, socialLinks: rows } }));
+  }
+
+  updateSocialLinkLabel(index: number, label: string): void {
+    const rows = this.socialLinkRows().map((row, i) => (i === index ? { ...row, label } : row));
+    this.onSocialLinksChange(rows);
+  }
+
+  updateSocialLinkUrl(index: number, url: string): void {
+    const rows = this.socialLinkRows().map((row, i) => (i === index ? { ...row, url } : row));
+    this.onSocialLinksChange(rows);
+  }
+
+  isValidUrl(url: string): boolean {
+    return !url || HTTP_URL.test(url);
+  }
 }