From 043192accf681adb31fee4029c8819a43c16f740 Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Mon, 20 Jul 2026 02:31:06 +0400 Subject: [PATCH] fix(icons): migrate Marketplace Builder to Lucide Replace every PrimeIcons pi-* usage across the builder: overview page (back link, next-step arrow, section cards, readiness checklist, quick links), sidebar nav (group/section status dots), main layout (back/home/menu/help icons), brand + homepage overview panels (checklist ok/pending dots, contrast warning), footer/homepage/widgets section editors (drag handles, move up/down, duplicate, remove), and the HTML editor toolbar (list/link/image/table/divider/code/embed). Notable correctness fix: PrimeIcons reused pi-bars for both the hamburger menu toggle AND every drag handle - two different meanings sharing one icon (exactly the kind of icon collision the audit calls out). Added a dedicated 'grip' icon (GripVertical) for drag handles so menu and drag-to-reorder are visually distinct. Added a global .spin utility (icon-registry has no built-in spinner animation) for the one loading-spinner icon in the builder overview checklist. All icon-bearing fields (BuilderGroup.icon, BlockCatalogEntry.icon, WIDGET_ICONS, STATUS_ICON, HtmlEditorToolbarCommand.icon, etc.) are now typed AppIconName instead of string. Co-Authored-By: Claude Sonnet 5 --- .../builder/builder-groups.model.ts | 19 +++++++------ .../marketplace-html-editor.component.html | 2 +- .../marketplace-html-editor.component.ts | 22 ++++++++------- .../project-editor-nav.component.html | 6 ++-- .../project-editor-nav.component.ts | 18 ++++++------ .../builder-overview-page.component.html | 28 ++++++++++--------- .../pages/builder-overview-page.component.ts | 14 ++++++---- .../pages/project-editor-page.component.html | 8 +++--- .../pages/project-editor-page.component.ts | 2 ++ .../brand/brand-overview.component.html | 8 +++--- .../brand/brand-overview.component.ts | 3 +- .../sections/footer-section.component.html | 4 +-- .../sections/footer-section.component.ts | 4 ++- .../sections/homepage-section.component.html | 10 +++---- .../sections/homepage-section.component.ts | 26 +++++++++-------- .../homepage/homepage-overview.component.html | 6 ++-- .../homepage/homepage-overview.component.ts | 3 +- .../sections/widgets-section.component.html | 10 +++---- .../sections/widgets-section.component.ts | 16 ++++++----- src/app/shared/ui/icon/icon-registry.ts | 2 ++ src/styles.scss | 9 ++++++ 21 files changed, 125 insertions(+), 95 deletions(-) diff --git a/src/app/features/project-editor/builder/builder-groups.model.ts b/src/app/features/project-editor/builder/builder-groups.model.ts index c86bd13..151ac16 100644 --- a/src/app/features/project-editor/builder/builder-groups.model.ts +++ b/src/app/features/project-editor/builder/builder-groups.model.ts @@ -1,4 +1,5 @@ import { ProjectEditorSectionId } from '../models/project-editor.model'; +import { AppIconName } from '../../../shared/ui/icon/icon-registry'; export type BuilderGroupId = | 'marketplace' @@ -12,7 +13,7 @@ export type BuilderGroupId = export interface BuilderGroup { id: BuilderGroupId; - icon: string; + icon: AppIconName; labelKey: string; descriptionKey: string; purposeKey: string; @@ -31,7 +32,7 @@ export interface BuilderGroup { export const BUILDER_GROUPS: BuilderGroup[] = [ { id: 'marketplace', - icon: 'pi-shop', + icon: 'store', labelKey: 'builder.groupMarketplaceLabel', descriptionKey: 'builder.groupMarketplaceDescription', purposeKey: 'builder.groupMarketplacePurpose', @@ -41,7 +42,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'branding', - icon: 'pi-palette', + icon: 'palette', labelKey: 'builder.groupBrandingLabel', descriptionKey: 'builder.groupBrandingDescription', purposeKey: 'builder.groupBrandingPurpose', @@ -53,7 +54,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'homepage', - icon: 'pi-home', + icon: 'home', labelKey: 'builder.groupHomepageLabel', descriptionKey: 'builder.groupHomepageDescription', purposeKey: 'builder.groupHomepagePurpose', @@ -63,7 +64,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'content', - icon: 'pi-file-edit', + icon: 'edit', labelKey: 'builder.groupContentLabel', descriptionKey: 'builder.groupContentDescription', purposeKey: 'builder.groupContentPurpose', @@ -73,7 +74,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'languages', - icon: 'pi-globe', + icon: 'globe', labelKey: 'builder.groupLanguagesLabel', descriptionKey: 'builder.groupLanguagesDescription', purposeKey: 'builder.groupLanguagesPurpose', @@ -83,7 +84,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'features', - icon: 'pi-sliders-h', + icon: 'slidersHorizontal', labelKey: 'builder.groupFeaturesLabel', descriptionKey: 'builder.groupFeaturesDescription', purposeKey: 'builder.groupFeaturesPurpose', @@ -93,7 +94,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'navigation', - icon: 'pi-compass', + icon: 'compass', labelKey: 'builder.groupNavigationLabel', descriptionKey: 'builder.groupNavigationDescription', purposeKey: 'builder.groupNavigationPurpose', @@ -103,7 +104,7 @@ export const BUILDER_GROUPS: BuilderGroup[] = [ }, { id: 'preview', - icon: 'pi-desktop', + icon: 'monitor', labelKey: 'builder.groupPreviewLabel', descriptionKey: 'builder.groupPreviewDescription', purposeKey: 'builder.groupPreviewPurpose', diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html index 810b8f7..3fb7181 100644 --- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html +++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html @@ -14,7 +14,7 @@ (click)="runCommand(item)" > @if (item.icon) { - + } @else { {{ item.label }} } diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts index 2f4f41e..940a873 100644 --- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts +++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts @@ -3,14 +3,16 @@ import { TranslateService } from '../../../../i18n/translate.service'; import { TranslatePipe } from '../../../../i18n/translate.pipe'; import { validateHtml } from '../../schema/validators/primitives'; import { CodeEditorComponent } from '../../../../shared/ui/code-editor/code-editor.component'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../../shared/ui/icon/icon-registry'; export interface HtmlEditorToolbarCommand { id: string; label: string; command: string; value?: string; - /** PrimeIcons class (e.g. 'pi-list'); when set the icon renders instead of the label. */ - icon?: string; + /** Lucide icon name (see icon-registry.ts); when set the icon renders instead of the label. */ + icon?: AppIconName; /** i18n key for the tooltip/aria-label. */ titleKey?: string; } @@ -21,14 +23,14 @@ export const HTML_EDITOR_TOOLBAR: HtmlEditorToolbarCommand[] = [ { id: 'underline', label: 'U', command: 'underline', titleKey: 'builder.htmlToolUnderline' }, { id: 'h2', label: 'H2', command: 'formatBlock', value: 'H2', titleKey: 'builder.htmlToolHeading' }, { id: 'h3', label: 'H3', command: 'formatBlock', value: 'H3', titleKey: 'builder.htmlToolSubheading' }, - { id: 'ul', label: '', icon: 'pi-list', command: 'insertUnorderedList', titleKey: 'builder.htmlToolBulletList' }, + { id: 'ul', label: '', icon: 'list', command: 'insertUnorderedList', titleKey: 'builder.htmlToolBulletList' }, { id: 'ol', label: '1.', command: 'insertOrderedList', titleKey: 'builder.htmlToolNumberedList' }, - { id: 'link', label: '', icon: 'pi-link', command: 'createLink', titleKey: 'builder.htmlToolLink' }, - { id: 'image', label: '', icon: 'pi-image', command: 'insertImage', titleKey: 'builder.htmlToolImage' }, - { id: 'table', label: '', icon: 'pi-table', command: 'insertHTML', value: '
  
', titleKey: 'builder.htmlToolTable' }, - { id: 'hr', label: '', icon: 'pi-minus', command: 'insertHorizontalRule', titleKey: 'builder.htmlToolDivider' }, - { id: 'codeblock', label: '', icon: 'pi-code', command: 'formatBlock', value: 'PRE', titleKey: 'builder.htmlToolCodeBlock' }, - { id: 'embed', label: '', icon: 'pi-video', command: 'insertEmbed', titleKey: 'builder.htmlToolEmbed' }, + { id: 'link', label: '', icon: 'link', command: 'createLink', titleKey: 'builder.htmlToolLink' }, + { id: 'image', label: '', icon: 'image', command: 'insertImage', titleKey: 'builder.htmlToolImage' }, + { id: 'table', label: '', icon: 'table', command: 'insertHTML', value: '
  
', titleKey: 'builder.htmlToolTable' }, + { id: 'hr', label: '', icon: 'minus', command: 'insertHorizontalRule', titleKey: 'builder.htmlToolDivider' }, + { id: 'codeblock', label: '', icon: 'code', command: 'formatBlock', value: 'PRE', titleKey: 'builder.htmlToolCodeBlock' }, + { id: 'embed', label: '', icon: 'video', command: 'insertEmbed', titleKey: 'builder.htmlToolEmbed' }, ]; /** Visual grouping for the toolbar: text style | headings | lists | insert | advanced. */ @@ -43,7 +45,7 @@ export const HTML_EDITOR_TOOLBAR_GROUPS: string[][] = [ @Component({ selector: 'app-marketplace-html-editor', standalone: true, - imports: [TranslatePipe, CodeEditorComponent], + imports: [TranslatePipe, CodeEditorComponent, IconComponent], templateUrl: './marketplace-html-editor.component.html', styleUrls: ['./marketplace-html-editor.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush diff --git a/src/app/features/project-editor/components/project-editor-nav.component.html b/src/app/features/project-editor/components/project-editor-nav.component.html index 033c85b..91b7380 100644 --- a/src/app/features/project-editor/components/project-editor-nav.component.html +++ b/src/app/features/project-editor/components/project-editor-nav.component.html @@ -2,9 +2,9 @@ @for (item of groups(); track item.group.id) {
- + {{ item.group.labelKey | translate }} - +
    @for (section of item.sections; track section.id) { @@ -16,7 +16,7 @@ class="editor-nav-link" (click)="onLinkClick()" > - + {{ section.labelKey | translate }} @if (section.issueCount > 0) { {{ section.issueCount }} diff --git a/src/app/features/project-editor/components/project-editor-nav.component.ts b/src/app/features/project-editor/components/project-editor-nav.component.ts index 5e13b37..f3e77ba 100644 --- a/src/app/features/project-editor/components/project-editor-nav.component.ts +++ b/src/app/features/project-editor/components/project-editor-nav.component.ts @@ -5,12 +5,14 @@ import { LangRoutePipe } from '../../../pipes/lang-route.pipe'; import { ProjectEditorSectionId, BuilderSectionStatus } from '../models/project-editor.model'; import { ProjectEditorFacade } from '../facade/project-editor.facade'; import { BUILDER_GROUPS, BuilderGroup } from '../builder/builder-groups.model'; +import { IconComponent } from '../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../shared/ui/icon/icon-registry'; -const STATUS_ICON: Record = { - complete: 'pi-check-circle', - 'in-progress': 'pi-circle-fill', - 'not-started': 'pi-circle', - unknown: 'pi-question-circle', +const STATUS_ICON: Record = { + complete: 'checkCircle', + 'in-progress': 'circle', + 'not-started': 'circle', + unknown: 'help', }; const STATUS_LABEL_KEY: Record = { @@ -24,7 +26,7 @@ interface NavSectionItem { id: ProjectEditorSectionId; labelKey: string; status: BuilderSectionStatus; - statusIcon: string; + statusIcon: AppIconName; statusLabelKey: string; modified: boolean; issueCount: number; @@ -33,7 +35,7 @@ interface NavSectionItem { interface NavGroupItem { group: BuilderGroup; status: BuilderSectionStatus; - statusIcon: string; + statusIcon: AppIconName; statusLabelKey: string; sections: NavSectionItem[]; } @@ -56,7 +58,7 @@ const SECTION_LABEL_KEYS: Record = { @Component({ selector: 'app-project-editor-nav', standalone: true, - imports: [TranslatePipe, RouterLink, RouterLinkActive, LangRoutePipe], + imports: [TranslatePipe, RouterLink, RouterLinkActive, LangRoutePipe, IconComponent], templateUrl: './project-editor-nav.component.html', styleUrls: ['./project-editor-nav.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/project-editor/pages/builder-overview-page.component.html b/src/app/features/project-editor/pages/builder-overview-page.component.html index ff80f46..a67c3e2 100644 --- a/src/app/features/project-editor/pages/builder-overview-page.component.html +++ b/src/app/features/project-editor/pages/builder-overview-page.component.html @@ -1,6 +1,6 @@
    - {{ 'adminShell.pages.dashboard.title' | translate }} + {{ 'adminShell.pages.dashboard.title' | translate }}

    {{ 'builder.appName' | translate }}

    @@ -26,7 +26,7 @@
- +

{{ 'builder.overviewNextStepLabel' | translate }}

@if (nextStepLabelKey(); as labelKey) { @@ -46,11 +46,13 @@ @for (group of groups; track group.id) {
- - + +

{{ group.labelKey | translate }}

{{ group.descriptionKey | translate }}

@@ -66,10 +68,10 @@ @for (check of readinessChecklist(); track check.labelKey) {
  • @switch (check.state) { - @case ('true') { } - @case ('false') { } - @case ('loading') { } - @default { } + @case ('true') { } + @case ('false') { } + @case ('loading') { } + @default { } } {{ check.labelKey | translate }}
    • @@ -81,10 +83,10 @@
    - {{ 'builder.preview' | translate }} + {{ 'builder.preview' | translate }} - {{ 'builder.general' | translate }} + {{ 'builder.general' | translate }}
    diff --git a/src/app/features/project-editor/pages/builder-overview-page.component.ts b/src/app/features/project-editor/pages/builder-overview-page.component.ts index cf59891..4ecde0b 100644 --- a/src/app/features/project-editor/pages/builder-overview-page.component.ts +++ b/src/app/features/project-editor/pages/builder-overview-page.component.ts @@ -9,12 +9,14 @@ import { ProjectEditorFacade } from '../facade/project-editor.facade'; import { BackofficeDataService } from '../../../core/backoffice/backoffice-data.service'; import { BUILDER_GROUPS } from '../builder/builder-groups.model'; import { BuilderSectionStatus } from '../models/project-editor.model'; +import { IconComponent } from '../../../shared/ui/icon/icon.component'; +import { AppIconName } from '../../../shared/ui/icon/icon-registry'; -const STATUS_ICON: Record = { - complete: 'pi-check-circle', - 'in-progress': 'pi-circle-fill', - 'not-started': 'pi-circle', - unknown: 'pi-question-circle', +const STATUS_ICON: Record = { + complete: 'checkCircle', + 'in-progress': 'circle', + 'not-started': 'circle', + unknown: 'help', }; const STATUS_LABEL_KEY: Record = { @@ -49,7 +51,7 @@ const SECTION_LABEL_KEYS: Record = { @Component({ selector: 'app-builder-overview-page', standalone: true, - imports: [RouterLink, TranslatePipe, LangRoutePipe], + imports: [RouterLink, TranslatePipe, LangRoutePipe, IconComponent], templateUrl: './builder-overview-page.component.html', styleUrl: './builder-overview-page.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/project-editor/pages/project-editor-page.component.html b/src/app/features/project-editor/pages/project-editor-page.component.html index f12ac53..c83ff1a 100644 --- a/src/app/features/project-editor/pages/project-editor-page.component.html +++ b/src/app/features/project-editor/pages/project-editor-page.component.html @@ -5,11 +5,11 @@
    @if (!textContrastPasses()) {

    - + {{ 'builder.brandContrastWarning' | translate }}

    } diff --git a/src/app/features/project-editor/sections/brand/brand-overview.component.ts b/src/app/features/project-editor/sections/brand/brand-overview.component.ts index 5db424a..47aea3d 100644 --- a/src/app/features/project-editor/sections/brand/brand-overview.component.ts +++ b/src/app/features/project-editor/sections/brand/brand-overview.component.ts @@ -3,6 +3,7 @@ import { TranslatePipe } from '../../../../i18n/translate.pipe'; import { LanguageService } from '../../../../services/language.service'; import { ProjectEditorFacade } from '../../facade/project-editor.facade'; import { contrastRatio } from './contrast.util'; +import { IconComponent } from '../../../../shared/ui/icon/icon.component'; interface BrandHealthItem { labelKey: string; @@ -12,7 +13,7 @@ interface BrandHealthItem { @Component({ selector: 'app-brand-overview', standalone: true, - imports: [TranslatePipe], + imports: [TranslatePipe, IconComponent], templateUrl: './brand-overview.component.html', styleUrl: './brand-overview.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/project-editor/sections/footer-section.component.html b/src/app/features/project-editor/sections/footer-section.component.html index 6bee0cd..00d9d30 100644 --- a/src/app/features/project-editor/sections/footer-section.component.html +++ b/src/app/features/project-editor/sections/footer-section.component.html @@ -89,7 +89,7 @@ @for (column of columns(); track column.id) {
    - +
    @@ -97,7 +97,7 @@
    @for (link of column.links; track link.id) {
    - +