From 1c51a819ed88fdca825ea4590b0aa70ee5a9b44e Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Thu, 16 Jul 2026 02:07:41 +0400
Subject: [PATCH] feat(project-editor): adopt Toggle/SectionCard in homepage
 and widgets sections

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../sections/homepage-section.component.html    |  9 ++++-----
 .../sections/homepage-section.component.ts      |  4 +++-
 .../sections/widgets-section.component.html     | 17 ++++++++---------
 .../sections/widgets-section.component.ts       |  4 +++-
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/app/features/project-editor/sections/homepage-section.component.html b/src/app/features/project-editor/sections/homepage-section.component.html
index c78da56..777d459 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.html
+++ b/src/app/features/project-editor/sections/homepage-section.component.html
@@ -1,14 +1,13 @@
 @if (homePage()) {
-<section class="editor-section-card">
-  <h2>{{ 'builder.homepage' | translate }}</h2>
+<app-section-card [title]="'builder.homepage' | translate">
   <div cdkDropList class="sortable-list" (cdkDropListDropped)="drop($event)">
     @for (section of sections(); track section.id) {
       <div class="sortable-item" cdkDrag>
         <div class="editor-grid four compact">
           <strong>{{ section.id }}</strong>
-          <label>
+          <label class="toggle-row">
+            <app-toggle [ngModel]="section.visible !== false" (ngModelChange)="updateSection(section.id, 'visible', $event)" [ariaLabel]="'builder.visible' | translate" />
             <span>{{ 'builder.visible' | translate }}</span>
-            <input type="checkbox" [checked]="section.visible !== false" (change)="updateSection(section.id, 'visible', $any($event.target).checked)" />
             <small class="field-desc">{{ 'builder.sectionVisibleDesc' | translate }}</small>
           </label>
           <label>
@@ -30,5 +29,5 @@
       </div>
     }
   </div>
-</section>
+</app-section-card>
 }
diff --git a/src/app/features/project-editor/sections/homepage-section.component.ts b/src/app/features/project-editor/sections/homepage-section.component.ts
index df83bd9..977944d 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.ts
+++ b/src/app/features/project-editor/sections/homepage-section.component.ts
@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { InputComponent } from '../../../shared/ui/input/input.component';
+import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
+import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
 
 export interface LayoutStrategyOption {
   value: 'stack' | 'grid' | 'hero' | 'carousel' | 'split';
@@ -14,7 +16,7 @@ export interface LayoutStrategyOption {
 @Component({
   selector: 'app-project-editor-homepage-section',
   standalone: true,
-  imports: [DragDropModule, FormsModule, TranslatePipe, InputComponent],
+  imports: [DragDropModule, FormsModule, TranslatePipe, InputComponent, SectionCardComponent, ToggleComponent],
   templateUrl: './homepage-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/widgets-section.component.html b/src/app/features/project-editor/sections/widgets-section.component.html
index 0bd99ab..4344450 100644
--- a/src/app/features/project-editor/sections/widgets-section.component.html
+++ b/src/app/features/project-editor/sections/widgets-section.component.html
@@ -1,6 +1,5 @@
 @if (widgets().length > 0) {
-<section class="editor-section-card">
-  <h2>{{ 'builder.widgets' | translate }}</h2>
+<app-section-card [title]="'builder.widgets' | translate">
   <div class="stack-list">
     @for (entry of widgets(); track entry.widget.id) {
       <article class="sub-card">
@@ -10,8 +9,8 @@
             <div class="editor-grid two">
               <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
               <label><span>{{ 'builder.height' | translate }}</span><small class="field-desc">{{ 'builder.widgetHeightDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['height'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'height', $event)" /></label>
-              <label><span>{{ 'builder.overlay' | translate }}</span><small class="field-desc">{{ 'builder.widgetOverlayDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['overlay']" (change)="updateProp(entry.widget.id, 'overlay', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.autoplay' | translate }}</span><small class="field-desc">{{ 'builder.widgetAutoplayDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['autoplay']" (change)="updateProp(entry.widget.id, 'autoplay', $any($event.target).checked)" /></label>
+              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['overlay']" (ngModelChange)="updateProp(entry.widget.id, 'overlay', $event)" [ariaLabel]="'builder.overlay' | translate" /><span>{{ 'builder.overlay' | translate }}</span><small class="field-desc">{{ 'builder.widgetOverlayDesc' | translate }}</small></label>
+              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['autoplay']" (ngModelChange)="updateProp(entry.widget.id, 'autoplay', $event)" [ariaLabel]="'builder.autoplay' | translate" /><span>{{ 'builder.autoplay' | translate }}</span><small class="field-desc">{{ 'builder.widgetAutoplayDesc' | translate }}</small></label>
             </div>
           }
           @case ('categories') {
@@ -24,10 +23,10 @@
             <div class="editor-grid three">
               <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
               <label><span>{{ 'builder.cardsPerRow' | translate }}</span><small class="field-desc">{{ 'builder.widgetCardsPerRowDesc' | translate }}</small><app-input type="number" [ngModel]="entry.widget.props['cardsPerRow'] || 4" (ngModelChange)="updateProp(entry.widget.id, 'cardsPerRow', +$event)" /></label>
-              <label><span>{{ 'builder.filtersLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetFiltersDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['filters']" (change)="updateProp(entry.widget.id, 'filters', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.showBadges' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowBadgesDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showBadges']" (change)="updateProp(entry.widget.id, 'showBadges', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.showRating' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowRatingDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showRating']" (change)="updateProp(entry.widget.id, 'showRating', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.showPrice' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowPriceDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showPrice']" (change)="updateProp(entry.widget.id, 'showPrice', $any($event.target).checked)" /></label>
+              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['filters']" (ngModelChange)="updateProp(entry.widget.id, 'filters', $event)" [ariaLabel]="'builder.filtersLabel' | translate" /><span>{{ 'builder.filtersLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetFiltersDesc' | translate }}</small></label>
+              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showBadges']" (ngModelChange)="updateProp(entry.widget.id, 'showBadges', $event)" [ariaLabel]="'builder.showBadges' | translate" /><span>{{ 'builder.showBadges' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowBadgesDesc' | translate }}</small></label>
+              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showRating']" (ngModelChange)="updateProp(entry.widget.id, 'showRating', $event)" [ariaLabel]="'builder.showRating' | translate" /><span>{{ 'builder.showRating' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowRatingDesc' | translate }}</small></label>
+              <label class="toggle-row"><app-toggle [ngModel]="!!entry.widget.props['showPrice']" (ngModelChange)="updateProp(entry.widget.id, 'showPrice', $event)" [ariaLabel]="'builder.showPrice' | translate" /><span>{{ 'builder.showPrice' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowPriceDesc' | translate }}</small></label>
             </div>
           }
           @default {
@@ -41,5 +40,5 @@
       </article>
     }
   </div>
-</section>
+</app-section-card>
 }
diff --git a/src/app/features/project-editor/sections/widgets-section.component.ts b/src/app/features/project-editor/sections/widgets-section.component.ts
index 9044593..89299d5 100644
--- a/src/app/features/project-editor/sections/widgets-section.component.ts
+++ b/src/app/features/project-editor/sections/widgets-section.component.ts
@@ -3,11 +3,13 @@ import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { InputComponent } from '../../../shared/ui/input/input.component';
+import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
+import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
 
 @Component({
   selector: 'app-project-editor-widgets-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe, InputComponent],
+  imports: [FormsModule, TranslatePipe, InputComponent, SectionCardComponent, ToggleComponent],
   templateUrl: './widgets-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush