updated editor and pageloading

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>