feat(static-pages): CRUD completion + search/filter/bulk actions

Milestone 2 of the Static Pages Module sprint.

- StaticPagesEditorComponent: duplicate page, confirm-before-delete/bulk-
  delete (matches the resetDraft confirm pattern), route/enabled/customTemplate/
  media(hero/thumbnail/gallery) fields wired into the card, per-page publish/
  unpublish action, status + duplicate-route/invalid-html/invalid-seo badges.
- Search (id/slug/route/title across all locales), filter by status
  (draft/published) and by locale (hides pages missing a translation for the
  selected locale) - all local computed() filters, no new service.
- Bulk selection (per-row + select-all-visible checkboxes) with bulk delete/
  enable/disable/publish/unpublish, one updateBootstrap() call each.
- Correctness note: introduced `allPages` (unfiltered) vs `pages` (filtered
  view) computeds. Every mutation (create/duplicate/delete/move/bulk) reads
  from allPages(), never the filtered pages() - reading from the filtered
  view would have silently deleted whatever an active search/filter hid on
  the next persist(). Documented inline on persist() as a guardrail for
  future edits.
- Fixed a template compile error found by the build gate: Angular templates
  don't support inline arrow functions in binding expressions
  ((ngModelChange)="...map(v => v.trim())..." failed to parse) - moved the
  gallery CSV-parsing into a component method (updateGallery).
- SEO robots field added to the page card (validated against a known-token
  set from M1).
- i18n: staticPages.* extended (search/filter/bulk/route/enabled/status/
  media/robots/disabled labels) across the interface + en/ru/hy.

Gate: tsc --noEmit, npm test (57/57), arch:check, build all green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/content-management/components/static-pages-editor.component.html

@@ -4,6 +4,35 @@
     <app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
   </div>
 
+  <div class="editor-grid three static-pages-toolbar">
+    <app-form-field [label]="'staticPages.searchPlaceholder' | translate">
+      <app-input [ngModel]="searchQuery()" (ngModelChange)="updateSearchQuery($event)" [placeholder]="'staticPages.searchPlaceholder' | translate" />
+    </app-form-field>
+    <app-form-field [label]="'staticPages.statusLabel' | translate">
+      <app-select [options]="statusFilterOptions()" [ngModel]="statusFilter()" (ngModelChange)="updateStatusFilter($event)" />
+    </app-form-field>
+    <app-form-field [label]="'builder.languagesTab' | translate">
+      <app-select [options]="localeFilterOptions()" [ngModel]="localeFilter()" (ngModelChange)="updateLocaleFilter($event)" />
+    </app-form-field>
+  </div>
+
+  @if (pages().length > 0) {
+    <div class="editor-actions static-pages-bulk-bar">
+      <label class="toggle-row">
+        <app-toggle [ngModel]="allVisibleSelected()" (ngModelChange)="toggleSelectAllVisible($event)" [ariaLabel]="'staticPages.selectAll' | translate" />
+        <span>{{ 'staticPages.selectAll' | translate }}</span>
+      </label>
+      @if (selectedCount() > 0) {
+        <span>{{ selectedCount() }} {{ 'staticPages.selectedCount' | translate }}</span>
+        <app-button variant="secondary" size="sm" (click)="bulkSetEnabled(true)">{{ 'staticPages.bulkEnable' | translate }}</app-button>
+        <app-button variant="secondary" size="sm" (click)="bulkSetEnabled(false)">{{ 'staticPages.bulkDisable' | translate }}</app-button>
+        <app-button variant="secondary" size="sm" (click)="bulkSetStatus('published')">{{ 'staticPages.bulkPublishAction' | translate }}</app-button>
+        <app-button variant="secondary" size="sm" (click)="bulkSetStatus('draft')">{{ 'staticPages.bulkUnpublish' | translate }}</app-button>
+        <app-button variant="danger" size="sm" (click)="bulkDelete()">{{ 'staticPages.bulkDelete' | translate }}</app-button>
+      }
+    </div>
+  }
+
   @if (pages().length === 0) {
     <app-empty-state [title]="'builder.staticPages' | translate" [description]="'builder.createPage' | translate">
       <span slot="actions">
@@ -17,18 +46,40 @@
       <app-card padding="md">
         <div class="page-card">
           <div class="page-card__header">
+            <label class="toggle-row page-card__select">
+              <app-toggle [ngModel]="isSelected(page.id)" (ngModelChange)="toggleSelect(page.id, $event)" [ariaLabel]="page.id" />
+            </label>
             <h3 class="page-card__title">
               {{ page.id }}
+              <app-badge [variant]="page.status === 'published' ? 'success' : 'neutral'">{{ (page.status === 'published' ? 'builder.statusPublished' : 'builder.statusDraft') | translate }}</app-badge>
+              @if (!page.enabled) {
+                <app-badge variant="neutral">{{ 'staticPages.disabledBadge' | translate }}</app-badge>
+              }
               @if (hasDuplicateSlug(page)) {
                 <app-badge variant="danger">{{ 'staticPages.duplicateSlug' | translate }}</app-badge>
               }
+              @if (hasDuplicateRoute(page)) {
+                <app-badge variant="danger">{{ 'staticPages.duplicateRoute' | translate }}</app-badge>
+              }
               @if (hasEmptyTitle(page)) {
                 <app-badge variant="danger">{{ 'staticPages.emptyTitle' | translate }}</app-badge>
               }
+              @if (hasInvalidHtml(page)) {
+                <app-badge variant="danger">{{ 'staticPages.invalidHtml' | translate }}</app-badge>
+              }
+              @if (hasInvalidSeo(page)) {
+                <app-badge variant="warning">{{ 'staticPages.invalidSeo' | translate }}</app-badge>
+              }
             </h3>
             <div class="editor-actions">
               <app-button variant="ghost" size="sm" (click)="move(page.id, -1)">&uarr;</app-button>
               <app-button variant="ghost" size="sm" (click)="move(page.id, 1)">&darr;</app-button>
+              <app-button variant="secondary" size="sm" (click)="duplicatePage(page.id)">{{ 'staticPages.duplicatePage' | translate }}</app-button>
+              @if (page.status === 'published') {
+                <app-button variant="secondary" size="sm" (click)="updatePage(page.id, { status: 'draft' })">{{ 'staticPages.unpublishPageAction' | translate }}</app-button>
+              } @else {
+                <app-button variant="primary" size="sm" (click)="updatePage(page.id, { status: 'published' })">{{ 'staticPages.publishPageAction' | translate }}</app-button>
+              }
               <app-button variant="danger" size="sm" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</app-button>
             </div>
           </div>
@@ -40,6 +91,9 @@
             <app-form-field [label]="'builder.slug' | translate" [error]="hasDuplicateSlug(page) ? ('staticPages.duplicateSlug' | translate) : null">
               <app-input [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $event })" />
             </app-form-field>
+            <app-form-field [label]="'staticPages.routeLabel' | translate" [error]="hasDuplicateRoute(page) ? ('staticPages.duplicateRoute' | translate) : null">
+              <app-input [ngModel]="page.route" (ngModelChange)="updatePage(page.id, { route: $event })" />
+            </app-form-field>
             <app-form-field [label]="'builder.iconLabel' | translate">
               <app-input [ngModel]="page.icon || ''" (ngModelChange)="updatePage(page.id, { icon: $event })" />
             </app-form-field>
@@ -49,6 +103,25 @@
             <app-form-field [label]="'builder.orderLabel' | translate">
               <app-input type="number" [ngModel]="page.order" (ngModelChange)="updatePage(page.id, { order: +$event })" />
             </app-form-field>
+            <app-form-field [label]="'staticPages.customTemplateLabel' | translate">
+              <app-input [ngModel]="page.customTemplate || ''" (ngModelChange)="updatePage(page.id, { customTemplate: $event })" />
+            </app-form-field>
+            <label class="toggle-row">
+              <app-toggle [ngModel]="page.enabled" (ngModelChange)="updatePage(page.id, { enabled: $event })" [ariaLabel]="'staticPages.enabledLabel' | translate" />
+              <span>{{ 'staticPages.enabledLabel' | translate }}</span>
+            </label>
+          </div>
+
+          <div class="editor-grid three">
+            <app-form-field [label]="'staticPages.heroImageLabel' | translate">
+              <app-input [ngModel]="page.heroImage || ''" (ngModelChange)="updatePage(page.id, { heroImage: $event })" />
+            </app-form-field>
+            <app-form-field [label]="'staticPages.thumbnailLabel' | translate">
+              <app-input [ngModel]="page.thumbnail || ''" (ngModelChange)="updatePage(page.id, { thumbnail: $event })" />
+            </app-form-field>
+            <app-form-field [label]="'staticPages.galleryLabel' | translate">
+              <app-input [ngModel]="(page.gallery || []).join(', ')" (ngModelChange)="updateGallery(page.id, $event)" />
+            </app-form-field>
           </div>
 
           <div class="toggle-grid">
@@ -96,6 +169,9 @@
             <app-form-field [label]="'builder.seoOgImage' | translate">
               <app-input [ngModel]="page.seo?.ogImage || ''" (ngModelChange)="updateSeo(page.id, { ogImage: $event })" />
             </app-form-field>
+            <app-form-field [label]="'staticPages.seoRobotsLabel' | translate" [error]="hasInvalidSeo(page) ? ('staticPages.invalidSeo' | translate) : null">
+              <app-input [ngModel]="page.seo?.robots || ''" (ngModelChange)="updateSeo(page.id, { robots: $event })" placeholder="index,follow" />
+            </app-form-field>
           </div>
         </div>
       </app-card>

src/app/features/content-management/components/static-pages-editor.component.ts

@@ -1,9 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../../project-editor/facade/project-editor.facade';
 import { ContentManagementFacade } from '../facade/content-management.facade';
-import { ContentPage, ContentPageSeoConfig } from '../models/content-page.model';
+import { ContentPage, ContentPageSeoConfig, ContentPageStatus } from '../models/content-page.model';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { TranslateService } from '../../../i18n/translate.service';
 import { MarketplaceHtmlEditorComponent } from '../../project-editor/components/html-editor/marketplace-html-editor.component';
 import { ButtonComponent } from '../../../shared/ui/button/button.component';
 import { InputComponent } from '../../../shared/ui/input/input.component';
@@ -11,6 +12,11 @@ import { CardComponent } from '../../../shared/ui/card/card.component';
 import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
 import { BadgeComponent } from '../../../shared/ui/badge/badge.component';
 import { EmptyStateComponent } from '../../../shared/ui/empty-state/empty-state.component';
+import { SelectComponent, SelectOption } from '../../../shared/ui/select/select.component';
+import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
+
+type StatusFilter = 'all' | ContentPageStatus;
+const ALL_LOCALES_FILTER = 'all';
 
 @Component({
   selector: 'app-static-pages-editor',
@@ -24,7 +30,9 @@ import { EmptyStateComponent } from '../../../shared/ui/empty-state/empty-state.
     CardComponent,
     FormFieldComponent,
     BadgeComponent,
-    EmptyStateComponent
+    EmptyStateComponent,
+    SelectComponent,
+    ToggleComponent,
   ],
   templateUrl: './static-pages-editor.component.html',
   styleUrls: ['../../project-editor/sections/section.shared.scss', './static-pages-editor.component.scss'],
@@ -33,20 +41,65 @@ import { EmptyStateComponent } from '../../../shared/ui/empty-state/empty-state.
 export class StaticPagesEditorComponent {
   private readonly projectEditor = inject(ProjectEditorFacade);
   private readonly contentFacade = inject(ContentManagementFacade);
+  private readonly translate = inject(TranslateService);
 
   readonly bootstrap = this.projectEditor.bootstrap;
-  readonly pages = computed(() => this.contentFacade.pages(this.bootstrap()));
+  readonly allPages = computed(() => this.contentFacade.pages(this.bootstrap()));
   readonly validation = computed(() => this.contentFacade.validatePages(this.bootstrap()));
   readonly locales = computed(() => this.bootstrap()?.localization.supportedLocales ?? ['en']);
 
+  readonly searchQuery = signal('');
+  readonly statusFilter = signal<StatusFilter>('all');
+  readonly localeFilter = signal<string>(ALL_LOCALES_FILTER);
+  readonly selectedIds = signal<Set<string>>(new Set());
+
+  readonly statusFilterOptions = computed<SelectOption[]>(() => [
+    { value: 'all', label: this.translate.t('staticPages.filterAll') },
+    { value: 'draft', label: this.translate.t('builder.statusDraft') },
+    { value: 'published', label: this.translate.t('builder.statusPublished') },
+  ]);
+
+  readonly localeFilterOptions = computed<SelectOption[]>(() => [
+    { value: ALL_LOCALES_FILTER, label: this.translate.t('staticPages.filterAllLocales') },
+    ...this.locales().map(locale => ({ value: locale, label: locale })),
+  ]);
+
+  readonly pages = computed(() => {
+    const query = this.searchQuery().trim().toLowerCase();
+    const status = this.statusFilter();
+    const locale = this.localeFilter();
+
+    return this.allPages().filter(page => {
+      if (status !== 'all' && page.status !== status) {
+        return false;
+      }
+      if (locale !== ALL_LOCALES_FILTER && !(page.translations[locale]?.title ?? '').trim()) {
+        return false;
+      }
+      if (!query) {
+        return true;
+      }
+      const haystack = [page.id, page.slug, page.route, page.title, ...Object.values(page.translations).map(t => t.title ?? '')]
+        .join(' ')
+        .toLowerCase();
+      return haystack.includes(query);
+    });
+  });
+
+  readonly selectedCount = computed(() => this.selectedIds().size);
+  readonly allVisibleSelected = computed(() => {
+    const visible = this.pages();
+    return visible.length > 0 && visible.every(page => this.selectedIds().has(page.id));
+  });
+
   createPage(): void {
-    const slug = `custom-page-${this.pages().length + 1}`;
+    const slug = `custom-page-${this.allPages().length + 1}`;
     const page: ContentPage = {
       id: `page-${Date.now()}`,
       slug,
       route: slug,
       title: '',
-      order: this.pages().length + 1,
+      order: this.allPages().length + 1,
       showInFooter: false,
       showInHeader: false,
       showInSitemap: true,
@@ -64,19 +117,40 @@ export class StaticPagesEditorComponent {
       status: 'draft',
     };
 
-    this.persist([...this.pages(), page]);
+    this.persist([...this.allPages(), page]);
+  }
+
+  duplicatePage(id: string): void {
+    const source = this.allPages().find(page => page.id === id);
+    if (!source) {
+      return;
+    }
+    const clone: ContentPage = {
+      ...source,
+      id: `page-${Date.now()}`,
+      slug: `${source.slug}-copy`,
+      route: `${source.route}-copy`,
+      order: this.allPages().length + 1,
+      status: 'draft',
+      translations: Object.fromEntries(Object.entries(source.translations).map(([locale, t]) => [locale, { ...t }])),
+    };
+    this.persist([...this.allPages(), clone]);
   }
 
   deletePage(id: string): void {
-    this.persist(this.pages().filter(page => page.id !== id));
+    if (!confirm(this.translate.t('staticPages.confirmDeletePage'))) {
+      return;
+    }
+    this.persist(this.allPages().filter(page => page.id !== id));
+    this.deselect(id);
   }
 
   updatePage(id: string, patch: Partial<ContentPage>): void {
-    this.persist(this.pages().map(page => page.id !== id ? page : ({ ...page, ...patch })));
+    this.persist(this.allPages().map(page => page.id !== id ? page : ({ ...page, ...patch })));
   }
 
   updateTranslation(id: string, locale: string, field: 'title' | 'html', value: string): void {
-    this.persist(this.pages().map(page => page.id !== id ? page : ({
+    this.persist(this.allPages().map(page => page.id !== id ? page : ({
       ...page,
       translations: {
         ...page.translations,
@@ -96,8 +170,25 @@ export class StaticPagesEditorComponent {
     return this.validation().emptyTitles.includes(page.id);
   }
 
+  hasDuplicateRoute(page: ContentPage): boolean {
+    return this.validation().duplicateRoutes.includes(page.route || page.slug);
+  }
+
+  hasInvalidHtml(page: ContentPage): boolean {
+    return this.validation().invalidHtml.includes(page.id);
+  }
+
+  hasInvalidSeo(page: ContentPage): boolean {
+    return this.validation().invalidSeo.includes(page.id);
+  }
+
+  updateGallery(id: string, value: string): void {
+    const gallery = value.split(',').map(url => url.trim()).filter(url => url.length > 0);
+    this.updatePage(id, { gallery });
+  }
+
   updateSeo(id: string, patch: Partial<ContentPageSeoConfig>): void {
-    this.persist(this.pages().map(page => page.id !== id ? page : ({
+    this.persist(this.allPages().map(page => page.id !== id ? page : ({
       ...page,
       seo: {
         ...(page.seo ?? {}),
@@ -107,7 +198,10 @@ export class StaticPagesEditorComponent {
   }
 
   move(id: string, direction: -1 | 1): void {
-    const pages = [...this.pages()].sort((a, b) => a.order - b.order);
+    // Reorders within the full page set (not the filtered/visible subset) so
+    // a search or status/locale filter can never drop pages out of the
+    // bootstrap - see the persist() note below.
+    const pages = [...this.allPages()].sort((a, b) => a.order - b.order);
     const index = pages.findIndex(page => page.id === id);
     const nextIndex = index + direction;
     if (index < 0 || nextIndex < 0 || nextIndex >= pages.length) {
@@ -120,7 +214,73 @@ export class StaticPagesEditorComponent {
     this.persist(pages.map((page, order) => ({ ...page, order: order + 1 })));
   }
 
+  // --- Search / filter ---
+
+  updateSearchQuery(value: string): void {
+    this.searchQuery.set(value);
+  }
+
+  updateStatusFilter(value: string): void {
+    this.statusFilter.set(value as StatusFilter);
+  }
+
+  updateLocaleFilter(value: string): void {
+    this.localeFilter.set(value);
+  }
+
+  // --- Bulk selection / actions ---
+
+  isSelected(id: string): boolean {
+    return this.selectedIds().has(id);
+  }
+
+  toggleSelect(id: string, checked: boolean): void {
+    const next = new Set(this.selectedIds());
+    checked ? next.add(id) : next.delete(id);
+    this.selectedIds.set(next);
+  }
+
+  toggleSelectAllVisible(checked: boolean): void {
+    const next = new Set(this.selectedIds());
+    for (const page of this.pages()) {
+      checked ? next.add(page.id) : next.delete(page.id);
+    }
+    this.selectedIds.set(next);
+  }
+
+  private deselect(id: string): void {
+    const next = new Set(this.selectedIds());
+    next.delete(id);
+    this.selectedIds.set(next);
+  }
+
+  clearSelection(): void {
+    this.selectedIds.set(new Set());
+  }
+
+  bulkDelete(): void {
+    if (!confirm(this.translate.t('staticPages.confirmBulkDelete'))) {
+      return;
+    }
+    const ids = this.selectedIds();
+    this.persist(this.allPages().filter(page => !ids.has(page.id)));
+    this.clearSelection();
+  }
+
+  bulkSetEnabled(enabled: boolean): void {
+    const ids = this.selectedIds();
+    this.persist(this.allPages().map(page => ids.has(page.id) ? { ...page, enabled } : page));
+  }
+
+  bulkSetStatus(status: ContentPageStatus): void {
+    const ids = this.selectedIds();
+    this.persist(this.allPages().map(page => ids.has(page.id) ? { ...page, status } : page));
+  }
+
   private persist(pages: ContentPage[]): void {
+    // Always writes the full page set. Callers must build `pages` from
+    // allPages(), never from the filtered pages() view, or an active search/
+    // status/locale filter would silently delete the pages it hid.
     this.projectEditor.updateBootstrap(current => ({
       ...current,
       staticPages: this.contentFacade.serializePages(pages)