Initial commit: Brachnha Insight project setup

- Next.js 14+ with App Router and TypeScript
- Tailwind CSS and ShadCN UI styling
- Zustand state management
- Dexie.js for IndexedDB (local-first data)
- Auth.js v5 for authentication
- BMAD framework integration

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/features/draft/DraftContent.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeRaw from 'rehype-raw';
+import type { Draft } from '@/lib/db/draft-service';
+
+interface DraftContentProps {
+  draft: Draft;
+}
+
+/**
+ * DraftContent Component - Markdown renderer for draft content
+ *
+ * Renders draft content with:
+ * - Merriweather serif font for "published" feel
+ * - Markdown parsing with GFM support
+ * - Syntax highlighting for code blocks
+ * - Tag display
+ * - Generous whitespace for comfortable reading
+ */
+export function DraftContent({ draft }: DraftContentProps) {
+  // Strip the first heading from content if it matches the title
+  const processedContent = (() => {
+    const lines = draft.content.split('\n');
+    const firstLine = lines[0]?.trim() || '';
+
+    // Check if first line is a heading that matches the title
+    const headingMatch = firstLine.match(/^#+\s*(.+)$/);
+    if (headingMatch) {
+      const headingText = headingMatch[1].trim();
+      if (headingText.toLowerCase() === draft.title.toLowerCase()) {
+        // Remove the first line (and any immediate blank lines after it)
+        let startIndex = 1;
+        while (startIndex < lines.length && lines[startIndex].trim() === '') {
+          startIndex++;
+        }
+        return lines.slice(startIndex).join('\n');
+      }
+    }
+    return draft.content;
+  })();
+
+  return (
+    <article className="draft-content px-4 sm:px-6 py-6 bg-white">
+      {/* Title - using Merriweather serif font */}
+      <h2 className="draft-title text-2xl sm:text-3xl font-bold text-slate-800 mb-6 font-serif leading-tight">
+        {draft.title}
+      </h2>
+
+      {/* Body content - Markdown with prose styling */}
+      <div className="draft-body prose prose-slate max-w-none font-serif">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeHighlight, rehypeRaw]}
+          components={{
+            // Custom heading styles
+            h1: ({ node, ...props }) => (
+              <h1 className="text-2xl font-bold text-slate-800 mt-8 mb-4 first:mt-0" {...props} />
+            ),
+            h2: ({ node, ...props }) => (
+              <h2 className="text-xl font-bold text-slate-800 mt-6 mb-3" {...props} />
+            ),
+            h3: ({ node, ...props }) => (
+              <h3 className="text-lg font-semibold text-slate-800 mt-5 mb-2" {...props} />
+            ),
+            // Paragraph styling
+            p: ({ node, ...props }) => (
+              <p className="text-base leading-relaxed text-slate-700 mb-4" {...props} />
+            ),
+            // Code blocks
+            code: ({ node, inline, className, children, ...props }: any) => {
+              if (inline) {
+                return (
+                  <code
+                    className="px-1.5 py-0.5 bg-slate-100 text-slate-800 rounded text-sm font-mono"
+                    {...props}
+                  >
+                    {children}
+                  </code>
+                );
+              }
+              return (
+                <code
+                  className={`block bg-slate-100 text-slate-800 p-4 rounded-lg text-sm font-mono overflow-x-auto ${className || ''}`}
+                  {...props}
+                >
+                  {children}
+                </code>
+              );
+            },
+            // Pre tags
+            pre: ({ node, ...props }) => (
+              <pre className="bg-slate-100 p-4 rounded-lg overflow-x-auto mb-4" {...props} />
+            ),
+            // Links
+            a: ({ node, ...props }) => (
+              <a className="text-slate-600 hover:text-slate-800 underline" {...props} />
+            ),
+            // Lists
+            ul: ({ node, ...props }) => (
+              <ul className="list-disc list-inside mb-4 text-slate-700 space-y-1" {...props} />
+            ),
+            ol: ({ node, ...props }) => (
+              <ol className="list-decimal list-inside mb-4 text-slate-700 space-y-1" {...props} />
+            ),
+            // Blockquotes
+            blockquote: ({ node, ...props }) => (
+              <blockquote className="border-l-4 border-slate-300 pl-4 italic text-slate-600 my-4" {...props} />
+            ),
+          }}
+        >
+          {processedContent}
+        </ReactMarkdown>
+      </div>
+
+      {/* Tags section */}
+      {draft.tags && draft.tags.length > 0 && (
+        <div className="flex flex-wrap gap-2 mt-6 pt-4 border-t border-slate-200">
+          {draft.tags.map((tag) => (
+            <span
+              key={tag}
+              className="tag-chip px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-sans"
+            >
+              #{tag}
+            </span>
+          ))}
+        </div>
+      )}
+    </article>
+  );
+}