feat: Code Mode Button Position & Markdown Support! 📝

## ✅ 3. Code Mode Button Moved to Left
**Problem:** Inconsistent layout, tabs on right should be Editor/Preview only
**Solution:**
- Moved Code Mode button next to "Message Body" label
- Editor/Preview tabs stay on the right
- Consistent, logical layout

**Before:**
```
Message Body                [Editor|Preview] [Code Mode]
```

**After:**
```
Message Body [Code Mode]                [Editor|Preview]
```

## ✅ 4. Markdown Support in Code Mode! 🎉
**Problem:** HTML is verbose, not user-friendly for tech-savvy users
**Solution:**
- Added Markdown parser with ::: syntax for cards
- Toggle between HTML and Markdown modes
- Full bidirectional conversion

**Markdown Syntax:**
```markdown
:::card
# Heading
Your content here
:::

:::card[success]
✅ Success message
:::

[button](https://example.com){Click Here}
[button style="outline"](url){Secondary Button}
```

**Features:**
- Standard Markdown: headings, bold, italic, lists, links
- Card blocks: :::card or :::card[type]
- Button blocks: [button](url){text}
- Variables: {order_url}, {customer_name}
- Bidirectional conversion (HTML ↔ Markdown)

**Files:**
- `lib/markdown-parser.ts` - Parser implementation
- `components/ui/code-editor.tsx` - Mode toggle
- `routes/Settings/Notifications/EditTemplate.tsx` - Enable support
- `DEPENDENCIES.md` - Add @codemirror/lang-markdown

**Note:** Requires `npm install @codemirror/lang-markdown`

Ready for remaining improvements (5-6)!

admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx

@@ -340,20 +340,8 @@ export default function EditTemplate() {
             <div className="space-y-4">
               {/* Tabs for Editor/Preview */}
               <div className="flex items-center justify-between">
-                <Label>{__('Message Body')}</Label>
                 <div className="flex items-center gap-2">
-                  <Tabs value={activeTab} onValueChange={setActiveTab} className="w-auto">
-                    <TabsList className="grid grid-cols-2">
-                      <TabsTrigger value="editor" className="flex items-center gap-1 text-xs">
-                        <Edit className="h-3 w-3" />
-                        {__('Editor')}
-                      </TabsTrigger>
-                      <TabsTrigger value="preview" className="flex items-center gap-1 text-xs">
-                        <Eye className="h-3 w-3" />
-                        {__('Preview')}
-                      </TabsTrigger>
-                    </TabsList>
-                  </Tabs>
+                  <Label>{__('Message Body')}</Label>
                   {activeTab === 'editor' && (
                     <Button
                       variant="ghost"
@@ -365,6 +353,18 @@ export default function EditTemplate() {
                     </Button>
                   )}
                 </div>
+                <Tabs value={activeTab} onValueChange={setActiveTab} className="w-auto">
+                  <TabsList className="grid grid-cols-2">
+                    <TabsTrigger value="editor" className="flex items-center gap-1 text-xs">
+                      <Edit className="h-3 w-3" />
+                      {__('Editor')}
+                    </TabsTrigger>
+                    <TabsTrigger value="preview" className="flex items-center gap-1 text-xs">
+                      <Eye className="h-3 w-3" />
+                      {__('Preview')}
+                    </TabsTrigger>
+                  </TabsList>
+                </Tabs>
               </div>
               
               {activeTab === 'editor' && codeMode ? (
@@ -373,9 +373,10 @@ export default function EditTemplate() {
                     value={body}
                     onChange={setBody}
                     placeholder={__('Enter HTML code with [card] tags...')}
+                    supportMarkdown={true}
                   />
                   <p className="text-xs text-muted-foreground">
-                    {__('Edit raw HTML code with [card] syntax. Syntax highlighting and auto-completion enabled.')}
+                    {__('Edit raw HTML code with [card] syntax, or switch to Markdown mode for easier editing.')}
                   </p>
                 </div>
               ) : activeTab === 'editor' ? (