sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): migrate Marketplace Builder to Lucide

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-20 02:31:06 +04:00
parent 330f24c8d7
commit 043192accf
21 changed files with 125 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/features/project-editor/sections/widgets-section.component.ts
View File

@@ -8,16 +8,18 @@ import { ButtonComponent } from '../../../shared/ui/button/button.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
import { WidgetConfig } from '../../../shared/models/config';
import { IconComponent } from '../../../shared/ui/icon/icon.component';
import { AppIconName } from '../../../shared/ui/icon/icon-registry';
interface HeroSlideDraft {
title: string;
subtitle: string;
}
const WIDGET_ICONS: Record<string, string> = {
hero: 'pi-image',
categories: 'pi-th-large',
'product-collection': 'pi-box',
const WIDGET_ICONS: Record<string, AppIconName> = {
hero: 'image',
categories: 'layoutGrid',
'product-collection': 'package',
};
const WIDGET_LABEL_KEYS: Record<string, string> = {
@@ -29,7 +31,7 @@ const WIDGET_LABEL_KEYS: Record<string, string> = {
@Component({
selector: 'app-project-editor-widgets-section',
standalone: true,
imports: [FormsModule, TranslatePipe, InputComponent, ButtonComponent, SectionCardComponent, ToggleComponent],
imports: [FormsModule, TranslatePipe, InputComponent, ButtonComponent, SectionCardComponent, ToggleComponent, IconComponent],
templateUrl: './widgets-section.component.html',
styleUrls: ['./section.shared.scss', './widgets-section.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@@ -43,8 +45,8 @@ export class ProjectEditorWidgetsSectionComponent {
return messageKey ? this.translate.t(messageKey) : null;
};
widgetIcon(type: string): string {
return WIDGET_ICONS[type] ?? 'pi-stop';
widgetIcon(type: string): AppIconName {
return WIDGET_ICONS[type] ?? 'stop';
}
widgetLabel(widget: WidgetConfig): string {