feat: Stock infinity symbol, sale price display, rich text editor, inline create categories/tags

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

admin-spa/src/components/RichTextEditor.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { Bold, Italic, List, ListOrdered, Heading2, Quote, Undo, Redo } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+type RichTextEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+export function RichTextEditor({ value, onChange, placeholder, className }: RichTextEditorProps) {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm max-w-none focus:outline-none min-h-[150px] px-3 py-2',
+      },
+    },
+  });
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className={cn('border rounded-md', className)}>
+      {/* Toolbar */}
+      <div className="border-b bg-muted/30 p-2 flex flex-wrap gap-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={cn('h-8 w-8 p-0', editor.isActive('bold') && 'bg-muted')}
+        >
+          <Bold className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={cn('h-8 w-8 p-0', editor.isActive('italic') && 'bg-muted')}
+        >
+          <Italic className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={cn('h-8 w-8 p-0', editor.isActive('heading', { level: 2 }) && 'bg-muted')}
+        >
+          <Heading2 className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={cn('h-8 w-8 p-0', editor.isActive('bulletList') && 'bg-muted')}
+        >
+          <List className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={cn('h-8 w-8 p-0', editor.isActive('orderedList') && 'bg-muted')}
+        >
+          <ListOrdered className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          className={cn('h-8 w-8 p-0', editor.isActive('blockquote') && 'bg-muted')}
+        >
+          <Quote className="h-4 w-4" />
+        </Button>
+        <div className="w-px h-8 bg-border mx-1" />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={!editor.can().undo()}
+          className="h-8 w-8 p-0"
+        >
+          <Undo className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={!editor.can().redo()}
+          className="h-8 w-8 p-0"
+        >
+          <Redo className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Editor */}
+      <EditorContent editor={editor} />
+    </div>
+  );
+}