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

10
src/app/features/project-editor/sections/homepage-section.component.html
View File

@@ -10,11 +10,11 @@
@for (section of sections(); track section.id) {
<div class="block-card" cdkDrag [class.block-card--hidden]="section.visible === false">
<div class="block-card__handle" cdkDragHandle [attr.aria-label]="'builder.dragToReorder' | translate">
<span class="pi pi-bars" aria-hidden="true"></span>
<app-icon name="grip" [size]="16" />
</div>
<div class="block-card__preview">
<span class="pi {{ blockIcon(section.type) }}" aria-hidden="true"></span>
<app-icon [name]="blockIcon(section.type)" [size]="20" />
</div>
<div class="block-card__body">
@@ -50,10 +50,10 @@
<span>{{ 'builder.visible' | translate }}</span>
</label>
<button type="button" [attr.aria-label]="'builder.widgetDuplicate' | translate" (click)="duplicateBlock(section.id)">
<span class="pi pi-copy" aria-hidden="true"></span>
<app-icon name="copy" [size]="16" />
</button>
<button type="button" class="block-card__remove" [attr.aria-label]="'builder.widgetRemove' | translate" (click)="removeBlock(section.id)">
<span class="pi pi-trash" aria-hidden="true"></span>
<app-icon name="trash" [size]="16" />
</button>
</div>
</div>
@@ -65,7 +65,7 @@
<div class="block-catalog__grid">
@for (entry of blockCatalog; track entry.type) {
<button type="button" class="block-catalog__item" (click)="addBlock(entry.type)">
<span class="pi {{ entry.icon }}" aria-hidden="true"></span>
<app-icon [name]="entry.icon" [size]="18" />
<span>{{ entry.labelKey | translate }}</span>
</button>
}