updated editor and pageloading

frontend/package-lock.json

@@ -14,8 +14,10 @@
         "@codemirror/commands": "^6.10.3",
         "@codemirror/lang-markdown": "^6.5.0",
         "@codemirror/language-data": "^6.5.2",
+        "@codemirror/search": "^6.6.0",
         "@codemirror/state": "^6.6.0",
         "@codemirror/view": "^6.40.0",
+        "@replit/codemirror-vim": "^6.3.0",
         "@tailwindcss/vite": "^4.2.2",
         "astro": "^6.0.8",
         "codemirror": "^6.0.2",
@@ -2039,6 +2041,19 @@
       "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
       "license": "MIT"
     },
+    "node_modules/@replit/codemirror-vim": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@replit/codemirror-vim/-/codemirror-vim-6.3.0.tgz",
+      "integrity": "sha512-aTx931ULAMuJx6xLf7KQDOL7CxD+Sa05FktTDrtLaSy53uj01ll3Zf17JdKsriER248oS55GBzg0CfCTjEneAQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@codemirror/commands": "6.x.x",
+        "@codemirror/language": "6.x.x",
+        "@codemirror/search": "6.x.x",
+        "@codemirror/state": "6.x.x",
+        "@codemirror/view": "6.x.x"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",

frontend/package.json

@@ -18,8 +18,10 @@
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/language-data": "^6.5.2",
+    "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
+    "@replit/codemirror-vim": "^6.3.0",
     "@tailwindcss/vite": "^4.2.2",
     "astro": "^6.0.8",
     "codemirror": "^6.0.2",

frontend/src/components/react/PostContent.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { marked } from 'marked';
-import hljs from 'highlight.js';
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
-
-interface Props {
-  content: string;
-  slug: string;
-}
-
-function renderMath(element: HTMLElement) {
-  const delimiters = [
-    { left: '$$', right: '$$', display: true },
-    { left: '$', right: '$', display: false },
-    { left: '\\(', right: '\\)', display: false },
-    { left: '\\[', right: '\\]', display: true },
-  ];
-
-  const walk = (node: Node) => {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const el = node as HTMLElement;
-      if (el.tagName === 'CODE' || el.tagName === 'PRE') return;
-      for (const child of Array.from(el.childNodes)) walk(child);
-    } else if (node.nodeType === Node.TEXT_NODE) {
-      const text = node.textContent || '';
-      for (const { left, right, display } of delimiters) {
-        const idx = text.indexOf(left);
-        if (idx === -1) continue;
-        const end = text.indexOf(right, idx + left.length);
-        if (end === -1) continue;
-        const tex = text.slice(idx + left.length, end);
-        try {
-          const rendered = katex.renderToString(tex, { displayMode: display, throwOnError: false });
-          const span = document.createElement('span');
-          span.innerHTML = rendered;
-          const range = document.createRange();
-          range.setStart(node, idx);
-          range.setEnd(node, end + right.length);
-          range.deleteContents();
-          range.insertNode(span);
-        } catch { /* skip invalid tex */ }
-        return;
-      }
-    }
-  };
-
-  // Multiple passes to catch nested/sequential math
-  for (let i = 0; i < 3; i++) walk(element);
-}
-
-export default function PostContent({ content, slug }: Props) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    const html = marked.parse(content);
-    if (typeof html === 'string') {
-      ref.current.innerHTML = html;
-    } else {
-      html.then(h => { if (ref.current) ref.current.innerHTML = h; });
-    }
-  }, [content]);
-
-  useEffect(() => {
-    if (!ref.current) return;
-    // Wait a tick for innerHTML to settle
-    const timer = setTimeout(() => {
-      if (!ref.current) return;
-      renderMath(ref.current);
-      ref.current.querySelectorAll<HTMLElement>('pre code').forEach((block) => {
-        hljs.highlightElement(block);
-      });
-    }, 0);
-    return () => clearTimeout(timer);
-  }, [content]);
-
-  // Show edit button if admin
-  const isAdmin = typeof window !== 'undefined' && !!localStorage.getItem('admin_token');
-
-  return (
-    <>
-      <header className="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12">
-        <a
-          href="/"
-          className="text-blue hover:text-sky transition-colors mb-6 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base"
-          style={{ color: 'var(--blue)' }}
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="md:w-5 md:h-5 transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
-          Back to list
-        </a>
-        <div className="flex flex-col md:flex-row md:justify-between md:items-start mt-2 md:mt-4 gap-4">
-          <h1 className="text-3xl md:text-5xl font-extrabold text-mauve">
-            {formatSlug(slug)}
-          </h1>
-          {isAdmin && (
-            <a
-              href={`/admin/editor?edit=${slug}`}
-              className="bg-surface0 hover:bg-surface1 text-blue px-3 py-1.5 md:px-4 md:py-2 rounded border border-surface1 transition-colors inline-flex items-center gap-2 text-sm md:text-base self-start"
-              style={{ color: 'var(--blue)' }}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="md:w-4 md:h-4"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
-              Edit
-            </a>
-          )}
-        </div>
-      </header>
-      <div className="prose max-w-none" ref={ref} />
-    </>
-  );
-}
-
-function formatSlug(slug: string) {
-  if (!slug) return '';
-  return slug
-    .split('-')
-    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
-    .join(' ');
-}

frontend/src/components/react/PostEnhancer.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import hljs from 'highlight.js';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+function renderMath(element: HTMLElement) {
+  const delimiters = [
+    { left: '$$', right: '$$', display: true },
+    { left: '$', right: '$', display: false },
+    { left: '\\(', right: '\\)', display: false },
+    { left: '\\[', right: '\\]', display: true },
+  ];
+
+  const walk = (node: Node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (el.tagName === 'CODE' || el.tagName === 'PRE') return;
+      for (const child of Array.from(el.childNodes)) walk(child);
+    } else if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || '';
+      for (const { left, right, display } of delimiters) {
+        const idx = text.indexOf(left);
+        if (idx === -1) continue;
+        const end = text.indexOf(right, idx + left.length);
+        if (end === -1) continue;
+        const tex = text.slice(idx + left.length, end);
+        try {
+          const rendered = katex.renderToString(tex, { displayMode: display, throwOnError: false });
+          const span = document.createElement('span');
+          span.innerHTML = rendered;
+          const range = document.createRange();
+          range.setStart(node, idx);
+          range.setEnd(node, end + right.length);
+          range.deleteContents();
+          range.insertNode(span);
+        } catch { /* skip invalid tex */ }
+        return;
+      }
+    }
+  };
+
+  for (let i = 0; i < 3; i++) walk(element);
+}
+
+interface Props {
+  containerId: string;
+}
+
+export default function PostEnhancer({ containerId }: Props) {
+  useEffect(() => {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+
+    renderMath(el);
+    el.querySelectorAll<HTMLElement>('pre code').forEach((block) => {
+      hljs.highlightElement(block);
+    });
+  }, [containerId]);
+
+  return null;
+}

frontend/src/components/react/admin/Editor.tsx

@@ -1,9 +1,15 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { EditorView, keymap, placeholder as cmPlaceholder } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { vim } from '@replit/codemirror-vim';
+import { search, searchKeymap } from '@codemirror/search';
+import { closeBrackets } from '@codemirror/autocomplete';
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+import katex from 'katex';
 import { getPost, savePost, deletePost, getAssets, ApiError } from '../../../lib/api';
 import type { Asset } from '../../../lib/types';
 import AssetManager from './AssetManager';
@@ -36,16 +42,76 @@ const narlblogTheme = EditorView.theme({
     border: 'none',
   },
   '.cm-activeLineGutter': { backgroundColor: 'var(--surface0)' },
+  // Search panel styling
+  '.cm-panels': {
+    backgroundColor: 'var(--mantle)',
+    color: 'var(--text)',
+    borderTop: '1px solid var(--surface1)',
+  },
+  '.cm-searchMatch': { backgroundColor: 'var(--yellow)', opacity: '0.3' },
+  '.cm-searchMatch-selected': { backgroundColor: 'var(--peach)', opacity: '0.4' },
+  // Vim cursor styling
+  '.cm-fat-cursor': {
+    backgroundColor: 'var(--mauve) !important',
+    color: 'var(--crust) !important',
+  },
+  '&:not(.cm-focused) .cm-fat-cursor': {
+    outline: '1px solid var(--mauve)',
+    backgroundColor: 'transparent !important',
+  },
 }, { dark: true });
 
+function renderMathInElement(element: HTMLElement) {
+  const delimiters = [
+    { left: '$$', right: '$$', display: true },
+    { left: '$', right: '$', display: false },
+    { left: '\\(', right: '\\)', display: false },
+    { left: '\\[', right: '\\]', display: true },
+  ];
+  const walk = (node: Node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (el.tagName === 'CODE' || el.tagName === 'PRE') return;
+      for (const child of Array.from(el.childNodes)) walk(child);
+    } else if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || '';
+      for (const { left, right, display } of delimiters) {
+        const idx = text.indexOf(left);
+        if (idx === -1) continue;
+        const end = text.indexOf(right, idx + left.length);
+        if (end === -1) continue;
+        const tex = text.slice(idx + left.length, end);
+        try {
+          const rendered = katex.renderToString(tex, { displayMode: display, throwOnError: false });
+          const span = document.createElement('span');
+          span.innerHTML = rendered;
+          const range = document.createRange();
+          range.setStart(node, idx);
+          range.setEnd(node, end + right.length);
+          range.deleteContents();
+          range.insertNode(span);
+        } catch { /* skip */ }
+        return;
+      }
+    }
+  };
+  for (let i = 0; i < 3; i++) walk(element);
+}
+
 export default function Editor({ editSlug }: Props) {
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [slug, setSlug] = useState(editSlug || '');
   const [summary, setSummary] = useState('');
   const [originalSlug, setOriginalSlug] = useState(editSlug || '');
   const [alert, setAlert] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
   const [showModal, setShowModal] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [vimEnabled, setVimEnabled] = useState(() =>
+    typeof window !== 'undefined' && window.innerWidth > 768
+  );
   const [showAutocomplete, setShowAutocomplete] = useState(false);
   const [autocompleteAssets, setAutocompleteAssets] = useState<Asset[]>([]);
   const [autocompletePos, setAutocompletePos] = useState({ top: 0, left: 0 });
@@ -56,39 +122,72 @@ export default function Editor({ editSlug }: Props) {
     setTimeout(() => setAlert(null), 5000);
   }
 
-  // Initialize CodeMirror 6
+  const updatePreview = useCallback(() => {
+    if (!showPreview || !viewRef.current || !previewRef.current) return;
+    const content = viewRef.current.state.doc.toString();
+    const result = marked.parse(content);
+    if (typeof result === 'string') {
+      previewRef.current.innerHTML = result;
+    } else {
+      result.then(h => { if (previewRef.current) previewRef.current.innerHTML = h; });
+    }
+    // Enhance preview after render
+    requestAnimationFrame(() => {
+      if (!previewRef.current) return;
+      renderMathInElement(previewRef.current);
+      previewRef.current.querySelectorAll<HTMLElement>('pre code').forEach(block => {
+        hljs.highlightElement(block);
+      });
+    });
+  }, [showPreview]);
+
+  function buildExtensions() {
+    const exts = [
+      ...(vimEnabled ? [vim()] : []),
+      keymap.of([...defaultKeymap, ...searchKeymap, indentWithTab]),
+      search(),
+      closeBrackets(),
+      markdown({ base: markdownLanguage, codeLanguages: languages }),
+      EditorView.lineWrapping,
+      narlblogTheme,
+      cmPlaceholder('# Hello World\nWrite your markdown here...'),
+      EditorView.updateListener.of(update => {
+        if (!update.docChanged) return;
+        // Debounced preview update
+        if (previewTimerRef.current) clearTimeout(previewTimerRef.current);
+        previewTimerRef.current = setTimeout(updatePreview, 300);
+        // Autocomplete trigger
+        const pos = update.state.selection.main.head;
+        const line = update.state.doc.lineAt(pos);
+        const textBefore = line.text.slice(0, pos - line.from);
+        const lastChar = textBefore.slice(-1);
+        if (lastChar === '/' || lastChar === '!') {
+          triggerAutocomplete(update.view);
+        } else if (lastChar === ' ' || textBefore.length === 0) {
+          setShowAutocomplete(false);
+        }
+      }),
+    ];
+    return exts;
+  }
+
+  // Initialize / rebuild CodeMirror when vim mode toggles
   useEffect(() => {
-    if (!editorRef.current || viewRef.current) return;
+    if (!editorRef.current) return;
+
+    // Preserve content if rebuilding
+    const oldContent = viewRef.current?.state.doc.toString() || '';
+    if (viewRef.current) viewRef.current.destroy();
 
     const state = EditorState.create({
-      doc: '',
-      extensions: [
-        keymap.of([...defaultKeymap, indentWithTab]),
-        markdown({ base: markdownLanguage, codeLanguages: languages }),
-        EditorView.lineWrapping,
-        narlblogTheme,
-        cmPlaceholder('# Hello World\nWrite your markdown here...'),
-        EditorView.updateListener.of(update => {
-          if (!update.docChanged) return;
-          // Check for autocomplete trigger
-          const pos = update.state.selection.main.head;
-          const line = update.state.doc.lineAt(pos);
-          const textBefore = line.text.slice(0, pos - line.from);
-          const lastChar = textBefore.slice(-1);
-          if (lastChar === '/' || lastChar === '!') {
-            triggerAutocomplete(update.view);
-          } else if (lastChar === ' ' || textBefore.length === 0) {
-            setShowAutocomplete(false);
-          }
-        }),
-      ],
+      doc: oldContent,
+      extensions: buildExtensions(),
     });
-
     const view = new EditorView({ state, parent: editorRef.current });
     viewRef.current = view;
 
     return () => { view.destroy(); viewRef.current = null; };
-  }, []);
+  }, [vimEnabled]);
 
   // Load existing post for editing
   useEffect(() => {
@@ -103,11 +202,15 @@ export default function Editor({ editSlug }: Props) {
     }).catch(() => showAlertMsg('Failed to load post.', 'error'));
   }, [editSlug]);
 
+  // Update preview when toggled on
+  useEffect(() => {
+    if (showPreview) updatePreview();
+  }, [showPreview, updatePreview]);
+
   async function triggerAutocomplete(view: EditorView) {
     try {
       const assets = await getAssets();
       setAutocompleteAssets(assets.slice(0, 8));
-      // Position near cursor
       const pos = view.state.selection.main.head;
       const coords = view.coordsAtPos(pos);
       if (coords) {
@@ -180,7 +283,6 @@ export default function Editor({ editSlug }: Props) {
     }
   }
 
-  // Close autocomplete on outside click
   useEffect(() => {
     if (!showAutocomplete) return;
     const handler = () => setShowAutocomplete(false);
@@ -247,51 +349,91 @@ export default function Editor({ editSlug }: Props) {
           />
         </div>
 
-        {/* Editor */}
-        <div className="relative">
-          <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-2 gap-2">
-            <label className="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse your assets</label>
+        {/* Editor Toolbar */}
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-2">
+          <div className="flex items-center gap-3">
+            <label className="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse assets</label>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setVimEnabled(v => !v)}
+              className={`text-xs px-3 py-1.5 rounded border transition-colors font-mono ${
+                vimEnabled
+                  ? 'bg-mauve/20 text-mauve border-mauve/30'
+                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+              }`}
+              title={vimEnabled ? 'Vim mode ON' : 'Vim mode OFF'}
+            >
+              {vimEnabled ? 'VIM' : 'vim'}
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowPreview(p => !p)}
+              className={`text-xs px-3 py-1.5 rounded border transition-colors ${
+                showPreview
+                  ? 'bg-blue/20 text-blue border-blue/30'
+                  : 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
+              }`}
+            >
+              {showPreview ? 'Hide Preview' : 'Show Preview'}
+            </button>
             <button
               type="button"
               onClick={() => setShowModal(true)}
-              className="text-sm bg-surface0 hover:bg-surface1 text-lavender px-4 py-2 rounded border border-surface1 transition-colors inline-flex items-center gap-2"
+              className="text-sm bg-surface0 hover:bg-surface1 text-lavender px-4 py-1.5 rounded border border-surface1 transition-colors inline-flex items-center gap-2"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
-              Asset Library
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
+              Assets
             </button>
           </div>
+        </div>
 
-          <div ref={editorRef} className="min-h-[500px]" />
+        {/* Editor + Preview */}
+        <div className={`relative ${showPreview ? 'grid grid-cols-1 md:grid-cols-2 gap-4' : ''}`}>
+          <div className="relative">
+            <div ref={editorRef} className="min-h-[500px]" />
 
-          {/* Autocomplete dropdown */}
-          {showAutocomplete && autocompleteAssets.length > 0 && (
-            <div
-              className="absolute z-50 bg-mantle border border-surface1 rounded-lg shadow-2xl max-h-64 overflow-y-auto w-80"
-              style={{ top: autocompletePos.top, left: autocompletePos.left }}
-              onClick={e => e.stopPropagation()}
-            >
-              <div className="p-2 text-[10px] text-subtext0 uppercase border-b border-white/5 bg-crust/50">Assets Library</div>
-              <ul className="py-1">
-                {autocompleteAssets.map(asset => {
-                  const img = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
-                  return (
-                    <li
-                      key={asset.name}
-                      onClick={() => insertAssetMarkdown(asset)}
-                      className="px-4 py-2 hover:bg-mauve/20 cursor-pointer text-sm truncate text-subtext1 hover:text-mauve flex items-center gap-3 transition-colors"
-                    >
-                      <div className="w-6 h-6 flex-shrink-0 bg-surface0 rounded flex items-center justify-center overflow-hidden">
-                        {img ? (
-                          <img src={asset.url} className="w-full h-full object-cover" alt="" />
-                        ) : (
-                          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg>
-                        )}
-                      </div>
-                      <span className="truncate">{asset.name}</span>
-                    </li>
-                  );
-                })}
-              </ul>
+            {/* Autocomplete dropdown */}
+            {showAutocomplete && autocompleteAssets.length > 0 && (
+              <div
+                className="absolute z-50 bg-mantle border border-surface1 rounded-lg shadow-2xl max-h-64 overflow-y-auto w-80"
+                style={{ top: autocompletePos.top, left: autocompletePos.left }}
+                onClick={e => e.stopPropagation()}
+              >
+                <div className="p-2 text-[10px] text-subtext0 uppercase border-b border-white/5 bg-crust/50">Assets Library</div>
+                <ul className="py-1">
+                  {autocompleteAssets.map(asset => {
+                    const img = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
+                    return (
+                      <li
+                        key={asset.name}
+                        onClick={() => insertAssetMarkdown(asset)}
+                        className="px-4 py-2 hover:bg-mauve/20 cursor-pointer text-sm truncate text-subtext1 hover:text-mauve flex items-center gap-3 transition-colors"
+                      >
+                        <div className="w-6 h-6 flex-shrink-0 bg-surface0 rounded flex items-center justify-center overflow-hidden">
+                          {img ? (
+                            <img src={asset.url} className="w-full h-full object-cover" alt="" />
+                          ) : (
+                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg>
+                          )}
+                        </div>
+                        <span className="truncate">{asset.name}</span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            )}
+          </div>
+
+          {/* Live Preview */}
+          {showPreview && (
+            <div className="border border-surface1 rounded-xl bg-crust/50 overflow-y-auto max-h-[600px] min-h-[500px]">
+              <div className="sticky top-0 bg-mantle px-4 py-2 text-xs text-subtext0 uppercase border-b border-surface1 z-10">
+                Preview
+              </div>
+              <div ref={previewRef} className="prose max-w-none p-4 md:p-6" />
             </div>
           )}
         </div>

frontend/src/pages/posts/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../../layouts/Layout.astro';
-import PostContent from '../../components/react/PostContent';
+import PostEnhancer from '../../components/react/PostEnhancer';
+import { marked } from 'marked';
 
 const { slug } = Astro.params;
 const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
@@ -11,12 +12,14 @@ interface PostDetail {
 }
 
 let post: PostDetail | null = null;
+let html = '';
 let error = '';
 
 try {
   const response = await fetch(`${API_URL}/api/posts/${slug}`);
   if (response.ok) {
     post = await response.json();
+    html = await marked.parse(post!.content);
   } else {
     error = 'Post not found';
   }
@@ -26,13 +29,12 @@ try {
   console.error(error);
 }
 
-function formatSlug(slug: string) {
-  if (!slug) return '';
-  return slug
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+function formatSlug(s: string) {
+  if (!s) return '';
+  return s.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
 }
+
+const isAdmin = Astro.cookies.has('admin_token');
 ---
 
 <Layout title={post ? formatSlug(post.slug) : 'Post'}>
@@ -45,7 +47,41 @@ function formatSlug(slug: string) {
     )}
 
     {post && (
-      <PostContent client:load content={post.content} slug={post.slug} />
+      <>
+        <header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12">
+          <a
+            href="/"
+            class="text-blue hover:text-sky transition-colors mb-6 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base"
+            style="color: var(--blue);"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-5 md:h-5 transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
+            Back to list
+          </a>
+          <div class="flex flex-col md:flex-row md:justify-between md:items-start mt-2 md:mt-4 gap-4">
+            <h1 class="text-3xl md:text-5xl font-extrabold text-mauve">
+              {formatSlug(post.slug)}
+            </h1>
+            <a
+              id="edit-link"
+              href={`/admin/editor?edit=${post.slug}`}
+              class="bg-surface0 hover:bg-surface1 text-blue px-3 py-1.5 md:px-4 md:py-2 rounded border border-surface1 transition-colors inline-flex items-center gap-2 text-sm md:text-base self-start hidden"
+              style="color: var(--blue);"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-4 md:h-4"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+              Edit
+            </a>
+          </div>
+        </header>
+        <div id="post-content" class="prose max-w-none" set:html={html} />
+        <PostEnhancer client:load containerId="post-content" />
+      </>
     )}
   </article>
 </Layout>
+
+<script>
+  if (localStorage.getItem('admin_token')) {
+    const el = document.getElementById('edit-link');
+    if (el) el.classList.remove('hidden');
+  }
+</script>