Fixed 4 major UX issues:
1. Stock Column - Show Infinity Symbol
Problem: Stock shows badge even when not managed
Solution:
- Check manage_stock flag
- If true: Show StockBadge with quantity
- If false: Show ∞ (infinity symbol) for unlimited
Result: Clear visual for unlimited stock
2. Type Column & Price Display
Problem: Type column empty, price ignores sale price
Solution:
- Type: Show badge with product.type (simple, variable, etc.)
- Price: Respect sale price hierarchy:
1. price_html (WooCommerce formatted)
2. sale_price (show strikethrough regular + green sale)
3. regular_price (normal display)
4. — (dash for no price)
Result:
- Type visible with badge styling
- Sale prices show with strikethrough
- Clear visual hierarchy
3. Rich Text Editor for Description
Problem: Description shows raw HTML in textarea
Solution:
- Created RichTextEditor component with Tiptap
- Toolbar: Bold, Italic, H2, Lists, Quote, Undo/Redo
- Integrated into GeneralTab
Features:
- WYSIWYG editing
- Keyboard shortcuts
- Clean toolbar UI
- Saves as HTML
Result: Professional rich text editing experience
4. Inline Create Categories & Tags
Problem: Cannot create new categories/tags in product form
Solution:
- Added input + "Add" button above each list
- Press Enter or click Add to create
- Auto-selects newly created item
- Shows loading state
- Toast notifications
Result:
- No need to leave product form
- Seamless workflow
- Better UX
Files Changed:
- index.tsx: Stock ∞, sale price display, type badge
- GeneralTab.tsx: RichTextEditor integration
- OrganizationTab.tsx: Inline create UI
- RichTextEditor.tsx: New reusable component
Note: Variation attribute value issue (screenshot 1) needs API data format investigation
c686777c7c