From 37c8e231c3f6948025c3670374e2677f1265143d Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 26 Mar 2026 01:38:00 +0100
Subject: [PATCH] fixed back button and coloring

---
 frontend/src/components/PostCard.astro |  2 +-
 frontend/src/layouts/AdminLayout.astro | 19 ++++++++++--
 frontend/src/pages/admin/editor.astro  | 43 +++++++++++++++++++-------
 frontend/src/pages/posts/[slug].astro  |  5 +--
 4 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/PostCard.astro b/frontend/src/components/PostCard.astro
index f0ebba6..42d886b 100644
--- a/frontend/src/components/PostCard.astro
+++ b/frontend/src/components/PostCard.astro
@@ -14,7 +14,7 @@ const { slug, excerpt, formatSlug } = Astro.props;
             <h2 class="text-xl md:text-3xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2 md:mb-3">
                 {formatSlug(slug)}
             </h2>
-            <p class="text-text text-sm md:text-base leading-relaxed line-clamp-3">
+            <p class="text-text text-sm md:text-base leading-relaxed line-clamp-3" style="color: var(--text) !important;">
                 {excerpt || `Read more about ${formatSlug(slug)}...`}
             </p>
         </div>
diff --git a/frontend/src/layouts/AdminLayout.astro b/frontend/src/layouts/AdminLayout.astro
index eada2e3..546efc4 100644
--- a/frontend/src/layouts/AdminLayout.astro
+++ b/frontend/src/layouts/AdminLayout.astro
@@ -9,12 +9,18 @@ const { title } = Astro.props;
 ---
 
 <Layout title={title}>
+    <!-- CodeMirror Assets -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
+    <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+    <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js"></script>
+    <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/keymap/vim.min.js"></script>
+
     <div class="glass p-6 md:p-12 mb-12" id="admin-content" style="display: none;">
         <header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
             <div>
-                <a href="/admin" class="text-blue hover:text-sky transition-colors mb-4 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base">
+                <a id="back-link" href="/admin" class="text-blue hover:text-sky transition-colors mb-4 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base" style="color: var(--blue) !important;">
                     <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>
-                    Dashboard
+                    Back
                 </a>
                 <h1 class="text-3xl md:text-4xl font-extrabold text-mauve">
                     {title}
@@ -37,6 +43,15 @@ const { title } = Astro.props;
         } else {
             const content = document.getElementById('admin-content');
             if (content) content.style.display = 'block';
+
+            // Smart Back Link
+            const backLink = document.getElementById('back-link');
+            if (backLink && document.referrer && document.referrer.includes(window.location.host) && !document.referrer.includes('/admin/login')) {
+                backLink.addEventListener('click', (ev) => {
+                    ev.preventDefault();
+                    window.history.back();
+                });
+            }
             
             // Dispatch custom event for child components to know token is ready
             document.dispatchEvent(new CustomEvent('admin-auth-ready', { detail: { token } }));
diff --git a/frontend/src/pages/admin/editor.astro b/frontend/src/pages/admin/editor.astro
index 2812589..1668058 100644
--- a/frontend/src/pages/admin/editor.astro
+++ b/frontend/src/pages/admin/editor.astro
@@ -3,11 +3,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
 ---
 
 <AdminLayout title="Write Post">
-    <!-- CodeMirror Assets -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css" slot="header-subtitle">
-    <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js" slot="header-subtitle"></script>
-    <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js" slot="header-subtitle"></script>
-    <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/keymap/vim.min.js" slot="header-subtitle"></script>
+    <p slot="header-subtitle" id="post-status" class="text-subtext1 mt-2 text-sm md:text-base">Create a new masterpiece.</p>
 
     <div slot="header-actions" class="flex gap-4 w-full">
         <button id="delete-btn" class="hidden text-red hover:bg-red/10 px-6 py-3 rounded-lg transition-colors font-bold border border-red/20 w-full md:w-auto">
@@ -19,6 +15,15 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
         >
             Save Post
         </button>
+        <a 
+            id="view-post-btn"
+            href="#"
+            target="_blank"
+            class="hidden bg-blue text-crust font-bold py-3 px-8 rounded-lg hover:bg-sky transition-all transform hover:scale-105 w-full md:w-auto whitespace-nowrap items-center justify-center gap-2"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="14" y2="10" x2="21" y2="3"/></svg>
+            View Post
+        </a>
     </div>
 
     <div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
@@ -123,6 +128,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
             const fileInput = document.getElementById('file-upload') as HTMLInputElement;
             const saveBtn = document.getElementById('save-btn');
             const delBtn = document.getElementById('delete-btn');
+            const viewPostBtn = document.getElementById('view-post-btn') as HTMLAnchorElement;
             const browseBtn = document.getElementById('browse-btn');
             const assetsModal = document.getElementById('assets-modal');
             const closeModal = document.getElementById('close-modal');
@@ -150,8 +156,8 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                     if (res.ok) {
                         allAssets = await res.json();
                     }
-                } catch (e) {
-                    console.error("Failed to fetch assets", e);
+                } catch (err) {
+                    console.error("Failed to fetch assets", err);
                 }
             }
 
@@ -272,8 +278,8 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 autocomplete?.classList.add('hidden');
             }
 
-            window.addEventListener('click', (e) => {
-                if (!autocomplete?.contains(e.target as Node)) {
+            window.addEventListener('click', (ev) => {
+                if (!autocomplete?.contains(ev.target as Node)) {
                     hideAutocomplete();
                 }
             });
@@ -325,8 +331,16 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                         },
                         body: JSON.stringify(payload)
                     });
-                    if (res.ok) showAlert('Post saved!', 'success');
-                    else showAlert('Error saving post.', 'error');
+                    if (res.ok) {
+                        showAlert('Post saved!', 'success');
+                        if (viewPostBtn) {
+                            viewPostBtn.href = `/posts/${payload.slug}`;
+                            viewPostBtn.classList.remove('hidden');
+                            viewPostBtn.classList.add('inline-flex');
+                        }
+                    } else {
+                        showAlert('Error saving post.', 'error');
+                    }
                 } catch (err) {
                     showAlert('Failed to connect to server.', 'error');
                 }
@@ -353,6 +367,13 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 slugInput.value = editSlug;
                 slugInput.disabled = true; // Protect slug on edit
                 delBtn?.classList.remove('hidden');
+                
+                if (viewPostBtn) {
+                    viewPostBtn.href = `/posts/${editSlug}`;
+                    viewPostBtn.classList.remove('hidden');
+                    viewPostBtn.classList.add('inline-flex');
+                }
+
                 fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
                     .then(res => res.json())
                     .then(data => { 
diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro
index ae3230a..3e99f2f 100644
--- a/frontend/src/pages/posts/[slug].astro
+++ b/frontend/src/pages/posts/[slug].astro
@@ -42,7 +42,7 @@ function formatSlug(slug: string) {
 <Layout title={post ? formatSlug(post.slug) : 'Post'}>
   <article class="glass p-6 md:p-12 mb-8 md:mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
     <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">
+      <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) !important;">
         <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>
@@ -55,6 +55,7 @@ function formatSlug(slug: string) {
             href={`/admin/editor?edit=${post.slug}`} 
             id="edit-btn"
             class="hidden bg-surface0 hover:bg-surface1 text-blue px-3 py-1.5 md:px-4 md:py-2 rounded border border-surface1 transition-colors items-center gap-2 text-sm md:text-base self-start"
+            style="color: var(--blue) !important;"
           >
             <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
@@ -71,7 +72,7 @@ function formatSlug(slug: string) {
     )}
 
     {post && (
-      <div class="prose prose-invert max-w-none" id="post-content" set:html={html} />
+      <div class="prose max-w-none" id="post-content" set:html={html} />
     )}
   </article>