+ {/* Sticky header — matches letters/compose pattern */}
+
+
+
+
+ setActiveTab('write')}
+ >
+
+
+ setActiveTab('details')}
+ >
+
+
+ setActiveTab('drafts')}
+ >
+
+
+
+
+
+
+ Save Draft (Ctrl+S)
+
+
+
+
+
+
+
+ {/* ── Write tab ────────────────────────────────────────────── */}
+ {activeTab === 'write' && (
+
+ {/* Title Input */}
+ updateArticle('title', e.target.value)}
+ placeholder="Your article title..."
+ className="w-full text-3xl sm:text-4xl font-bold bg-transparent border-none outline-none placeholder:text-muted-foreground/40 mb-4"
+ />
+
+ {/* Editor */}
+ updateArticle('content', value || '')}
+ onUploadImage={handleImageUpload}
+ onImageButtonClick={handleInlineImageButtonClick}
+ placeholder="Start writing your article..."
+ className="rounded-xl overflow-hidden border border-border bg-card min-h-[400px]"
+ />
+
+ {/* Stats Bar */}
+
+ )}
+
+ {/* ── Details tab ──────────────────────────────────────────── */}
+ {activeTab === 'details' && (
+
+ {wordCount} words
+ ·
+ {charCount} chars
+ ·
+ {readingTime} min read
+ {statusLabel && (
+ <>
+ ·
+ {statusLabel}
+
+ )}
+
+
+ {/* Header Image */}
+
+
+ {article.image ? (
+
+
+ {/* URL Slug */}
+
+ 
+
+ ) : (
+
+ )}
+
+
+
+
+
+ updateArticle('slug', e.target.value)}
+ placeholder="article-url-slug"
+ className="font-mono text-sm"
+ />
+
+
+ {/* Tags */}
+
+
+
+
+ {/* Summary */}
+
+ setTagInput(e.target.value)}
+ onKeyDown={(e) =>
+ e.key === 'Enter' && (e.preventDefault(), handleAddTag())
+ }
+ placeholder="Add a tag..."
+ className="flex-1"
+ />
+
+
+ {article.tags.length > 0 && (
+
+ {article.tags.map((tag) => (
+
+ #{tag}
+
+
+ ))}
+
+ )}
+
+
+