From d7e44a84d5de93e7b9669f481762135dea787e3a Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Fri, 27 Mar 2026 14:27:01 +0100
Subject: [PATCH] added asset manegement

---
 backend/src/handlers/upload.rs             |  39 ++++-
 backend/src/main.rs                        |   1 +
 frontend/src/components/AssetManager.astro | 178 +++++++++++++++++++++
 frontend/src/pages/admin/assets.astro      |  10 ++
 frontend/src/pages/admin/editor.astro      | 172 ++++----------------
 frontend/src/pages/admin/index.astro       |  30 ++--
 6 files changed, 279 insertions(+), 151 deletions(-)
 create mode 100644 frontend/src/components/AssetManager.astro
 create mode 100644 frontend/src/pages/admin/assets.astro

diff --git a/backend/src/handlers/upload.rs b/backend/src/handlers/upload.rs
index 49ebf12..7aa45d7 100644
--- a/backend/src/handlers/upload.rs
+++ b/backend/src/handlers/upload.rs
@@ -1,8 +1,9 @@
 use axum::{
     Json,
-    extract::{Multipart, State},
-    http::HeaderMap,
+    extract::{Multipart, State, Path, Query},
+    http::{HeaderMap, StatusCode},
 };
+use serde::Deserialize;
 use std::{fs, sync::Arc};
 use tracing::{error, info, warn};
 
@@ -13,6 +14,37 @@ use crate::{
     models::{FileInfo, UploadResponse},
 };
 
+#[derive(Deserialize)]
+pub struct UploadQuery {
+    pub replace: Option<bool>,
+}
+
+pub async fn delete_upload(
+    State(state): State<Arc<AppState>>,
+    headers: HeaderMap,
+    Path(filename): Path<String>,
+) -> Result<StatusCode, AppError> {
+    check_auth(&headers, &state.admin_token)?;
+
+    let file_path = state.data_dir.join("uploads").join(&filename);
+    
+    // Security check to prevent directory traversal
+    if file_path.parent() != Some(&state.data_dir.join("uploads")) {
+        return Err(AppError::BadRequest("Invalid filename".to_string()));
+    }
+
+    if file_path.exists() {
+        fs::remove_file(file_path).map_err(|e| {
+            error!("Delete error for file {}: {}", filename, e);
+            AppError::Internal("Delete error".to_string(), Some(e.to_string()))
+        })?;
+        info!("Deleted file: {}", filename);
+        Ok(StatusCode::NO_CONTENT)
+    } else {
+        Err(AppError::NotFound("File not found".to_string()))
+    }
+}
+
 pub async fn list_uploads(
     State(state): State<Arc<AppState>>,
     headers: HeaderMap,
@@ -42,6 +74,7 @@ pub async fn list_uploads(
 pub async fn upload_file(
     State(state): State<Arc<AppState>>,
     headers: HeaderMap,
+    Query(query): Query<UploadQuery>,
     mut multipart: Multipart,
 ) -> Result<Json<UploadResponse>, AppError> {
     check_auth(&headers, &state.admin_token)?;
@@ -71,7 +104,7 @@ pub async fn upload_file(
         let uploads_dir = state.data_dir.join("uploads");
         let file_path = uploads_dir.join(&final_name);
 
-        let final_path = if file_path.exists() {
+        let final_path = if file_path.exists() && !query.replace.unwrap_or(false) {
             let timestamp = chrono::Utc::now().timestamp();
             uploads_dir.join(format!("{}_{}", timestamp, final_name))
         } else {
diff --git a/backend/src/main.rs b/backend/src/main.rs
index 4f18c29..5599aab 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -67,6 +67,7 @@ async fn main() {
             get(handlers::posts::get_post).delete(handlers::posts::delete_post),
         )
         .route("/api/uploads", get(handlers::upload::list_uploads))
+        .route("/api/uploads/{filename}", delete(handlers::upload::delete_upload))
         .route("/api/upload", post(handlers::upload::upload_file))
         .nest_service("/uploads", ServeDir::new(uploads_dir))
         .layer(DefaultBodyLimit::max(50 * 1024 * 1024))
diff --git a/frontend/src/components/AssetManager.astro b/frontend/src/components/AssetManager.astro
new file mode 100644
index 0000000..0ebd94c
--- /dev/null
+++ b/frontend/src/components/AssetManager.astro
@@ -0,0 +1,178 @@
+---
+interface Props {
+    mode?: 'select' | 'manage';
+}
+
+const { mode = 'manage' } = Astro.props;
+---
+
+<div class="space-y-8">
+    <div id="asset-alert" class="hidden p-4 rounded-lg mb-6 text-sm"></div>
+
+    <!-- Upload Zone -->
+    <div class="glass p-6 border-dashed border-2 border-surface1 hover:border-mauve transition-colors group relative">
+        <input type="file" id="zone-file-upload" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" multiple />
+        <div class="text-center py-4">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4 text-subtext0 group-hover:text-mauve transition-colors"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+            <p class="text-lg font-bold text-lavender">Click or drag to upload assets</p>
+            <p class="text-xs text-subtext0 mt-1">Any file type up to 50MB</p>
+        </div>
+    </div>
+
+    <!-- Assets Grid -->
+    <div id="manager-assets-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        <!-- Assets injected here -->
+    </div>
+    <div id="manager-assets-empty" class="hidden text-center py-20 text-subtext0">
+        No assets uploaded yet.
+    </div>
+</div>
+
+<script is:inline define:vars={{ mode }}>
+    const token = localStorage.getItem('admin_token');
+    const grid = document.getElementById('manager-assets-grid');
+    const empty = document.getElementById('manager-assets-empty');
+    const fileInput = document.getElementById('zone-file-upload');
+    const alertEl = document.getElementById('asset-alert');
+
+    let allAssets = [];
+
+    async function fetchAssets() {
+        try {
+            const res = await fetch('/api/uploads', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (res.ok) {
+                allAssets = await res.json();
+                renderAssets();
+            }
+        } catch (e) {
+            console.error("Failed to fetch assets", e);
+        }
+    }
+
+    function showLocalAlert(msg, type) {
+        if (!alertEl) return;
+        alertEl.textContent = msg;
+        alertEl.className = `p-4 rounded-lg mb-6 text-sm ${type === 'success' ? 'bg-green/20 text-green border border-green/30' : 'bg-red/20 text-red border border-red/30'}`;
+        alertEl.classList.remove('hidden');
+        setTimeout(() => alertEl.classList.add('hidden'), 4000);
+    }
+
+    async function uploadFiles(files) {
+        let successCount = 0;
+        for (const file of files) {
+            const formData = new FormData();
+            formData.append('file', file);
+            try {
+                const res = await fetch('/api/upload', {
+                    method: 'POST',
+                    headers: { 'Authorization': `Bearer ${token}` },
+                    body: formData
+                });
+                if (res.ok) successCount++;
+            } catch (e) {}
+        }
+        if (successCount > 0) {
+            showLocalAlert(`Successfully uploaded ${successCount} file(s).`, 'success');
+            fetchAssets();
+        }
+    }
+
+    async function deleteAsset(filename) {
+        if (!confirm(`Delete "${filename}" permanently?`)) return;
+        try {
+            const res = await fetch(`/api/uploads/${encodeURIComponent(filename)}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (res.ok) {
+                showLocalAlert('File deleted.', 'success');
+                fetchAssets();
+            } else {
+                showLocalAlert('Failed to delete file.', 'error');
+            }
+        } catch (e) {
+            showLocalAlert('Connection error.', 'error');
+        }
+    }
+
+    function renderAssets() {
+        if (!grid || !empty) return;
+        grid.innerHTML = '';
+        
+        if (allAssets.length === 0) {
+            empty.classList.remove('hidden');
+            return;
+        }
+        empty.classList.add('hidden');
+
+        allAssets.forEach(asset => {
+            const div = document.createElement('div');
+            div.className = "group relative aspect-square bg-crust rounded-xl overflow-hidden border border-white/5 transition-all hover:scale-105 shadow-lg flex flex-col";
+            
+            const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
+            
+            // Preview Container
+            const preview = document.createElement('div');
+            preview.className = "flex-1 overflow-hidden bg-surface0/20 relative cursor-pointer";
+            
+            if (isImage) {
+                const img = document.createElement('img');
+                img.src = asset.url;
+                img.className = "w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity";
+                preview.appendChild(img);
+            } else {
+                preview.className += " flex flex-col items-center justify-center text-subtext0";
+                preview.innerHTML = `
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2"><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"/><polyline points="14 2 14 8 20 8"/></svg>
+                    <span class="text-[8px] font-mono px-2 truncate w-full text-center">${asset.name.split('.').pop().toUpperCase()}</span>
+                `;
+            }
+
+            // Action Overlays
+            const actions = document.createElement('div');
+            actions.className = "absolute inset-0 bg-crust/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2";
+            
+            if (mode === 'select') {
+                const selectBtn = document.createElement('button');
+                selectBtn.className = "bg-mauve text-crust px-3 py-1 rounded-md text-xs font-bold";
+                selectBtn.textContent = "Insert";
+                selectBtn.onclick = () => {
+                    document.dispatchEvent(new CustomEvent('asset-selected', { detail: asset }));
+                };
+                actions.appendChild(selectBtn);
+            }
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = "bg-red/80 hover:bg-red text-white p-1.5 rounded-md transition-colors";
+            deleteBtn.innerHTML = '<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"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>';
+            deleteBtn.onclick = (e) => {
+                e.stopPropagation();
+                deleteAsset(asset.name);
+            };
+            actions.appendChild(deleteBtn);
+
+            preview.appendChild(actions);
+
+            // Label
+            const label = document.createElement('div');
+            label.className = "p-2 bg-crust text-[10px] truncate border-t border-white/5 text-subtext1";
+            label.textContent = asset.name;
+
+            div.appendChild(preview);
+            div.appendChild(label);
+            grid.appendChild(div);
+        });
+    }
+
+    fileInput?.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) uploadFiles(e.target.files);
+    });
+
+    // Initialize
+    fetchAssets();
+
+    // Re-fetch on global upload events if needed
+    document.addEventListener('assets-updated', fetchAssets);
+</script>
diff --git a/frontend/src/pages/admin/assets.astro b/frontend/src/pages/admin/assets.astro
new file mode 100644
index 0000000..21f4e7a
--- /dev/null
+++ b/frontend/src/pages/admin/assets.astro
@@ -0,0 +1,10 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import AssetManager from '../../components/AssetManager.astro';
+---
+
+<AdminLayout title="Asset Library">
+    <p slot="header-subtitle" class="mt-2 text-sm md:text-base text-subtext1">Manage your uploaded images and files.</p>
+    
+    <AssetManager mode="manage" />
+</AdminLayout>
diff --git a/frontend/src/pages/admin/editor.astro b/frontend/src/pages/admin/editor.astro
index d99af13..aa65145 100644
--- a/frontend/src/pages/admin/editor.astro
+++ b/frontend/src/pages/admin/editor.astro
@@ -1,5 +1,6 @@
 ---
 import AdminLayout from '../../layouts/AdminLayout.astro';
+import AssetManager from '../../components/AssetManager.astro';
 ---
 
 <AdminLayout title="Write Post">
@@ -54,24 +55,13 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
             <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-2 gap-2">
                 <label for="content" class="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse your assets</label>
                 
-                <div class="flex gap-2 w-full md:w-auto">
-                    <button 
-                        id="browse-btn"
-                        class="flex-1 md:flex-none text-sm bg-surface0 hover:bg-surface1 text-lavender px-4 py-2 rounded border border-surface1 transition-colors inline-flex justify-center 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" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
-                        Library
-                    </button>
-
-                    <input type="file" id="file-upload" class="hidden" />
-                    <label 
-                        for="file-upload" 
-                        class="flex-1 md:flex-none cursor-pointer text-sm bg-surface0 hover:bg-surface1 text-blue px-4 py-2 rounded border border-surface1 transition-colors inline-flex justify-center 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" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
-                        Upload
-                    </label>
-                </div>
+                <button 
+                    id="open-library-btn"
+                    class="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"
+                >
+                    <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"><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
+                </button>
             </div>
 
             <textarea 
@@ -94,24 +84,18 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
 
     <!-- Assets Modal -->
     <div id="assets-modal" class="hidden fixed inset-0 z-[100] bg-crust/80 backdrop-blur-sm flex items-center justify-center p-4 md:p-6">
-        <div class="glass w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden">
+        <div class="glass w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
             <header class="p-4 md:p-6 border-b border-white/5 flex justify-between items-center bg-surface0/20">
                 <div>
                     <h2 class="text-xl md:text-2xl font-bold text-mauve">Asset Library</h2>
-                    <p class="text-xs text-subtext0">Click an asset to insert its markdown link.</p>
+                    <p class="text-xs text-subtext0">Click 'Insert' to add an asset to your post.</p>
                 </div>
                 <button id="close-modal" class="p-2 text-subtext0 hover:text-red transition-colors">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                 </button>
             </header>
             <div class="p-4 md:p-6 overflow-y-auto flex-1 bg-base/50">
-                <div id="assets-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                    <!-- Assets injected here -->
-                </div>
-                <div id="assets-empty" class="hidden text-center py-20 text-subtext0">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4 opacity-20"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
-                    No assets uploaded yet.
-                </div>
+                <AssetManager mode="select" />
             </div>
         </div>
     </div>
@@ -125,15 +109,12 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
             const slugInput = document.getElementById('slug') as HTMLInputElement;
             const summaryInput = document.getElementById('summary') as HTMLTextAreaElement;
             const contentInput = document.getElementById('content') as HTMLTextAreaElement;
-            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 openLibraryBtn = document.getElementById('open-library-btn');
             const assetsModal = document.getElementById('assets-modal');
             const closeModal = document.getElementById('close-modal');
-            const assetsGrid = document.getElementById('assets-grid');
-            const assetsEmpty = document.getElementById('assets-empty');
             const autocomplete = document.getElementById('autocomplete');
             const autocompleteList = document.getElementById('autocomplete-list');
 
@@ -148,24 +129,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
             });
 
-            let allAssets: {name: string, url: string}[] = [];
-
-            async function fetchAssets() {
-                try {
-                    const res = await fetch('/api/uploads', {
-                        headers: { 'Authorization': `Bearer ${token}` }
-                    });
-                    if (res.ok) {
-                        allAssets = await res.json();
-                    }
-                } catch (err) {
-                    console.error("Failed to fetch assets", err);
-                }
-            }
-
-            browseBtn?.addEventListener('click', async () => {
-                await fetchAssets();
-                renderAssets();
+            openLibraryBtn?.addEventListener('click', () => {
                 assetsModal?.classList.remove('hidden');
             });
 
@@ -173,50 +137,12 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 assetsModal?.classList.add('hidden');
             });
 
-            function renderAssets() {
-                if (!assetsGrid || !assetsEmpty) return;
-                assetsGrid.innerHTML = '';
-                
-                if (allAssets.length === 0) {
-                    assetsEmpty.classList.remove('hidden');
-                    return;
-                }
-                assetsEmpty.classList.add('hidden');
-
-                allAssets.forEach(asset => {
-                    const div = document.createElement('div');
-                    div.className = "group relative aspect-square bg-crust rounded-xl overflow-hidden border border-white/5 cursor-pointer hover:border-mauve transition-all hover:scale-105 shadow-lg";
-                    
-                    const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
-                    
-                    if (isImage) {
-                        const img = document.createElement('img');
-                        img.src = asset.url;
-                        img.className = "w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity";
-                        div.appendChild(img);
-                    } else {
-                        const icon = document.createElement('div');
-                        icon.className = "w-full h-full flex flex-col items-center justify-center text-subtext0 bg-surface0/30";
-                        icon.innerHTML = `
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2"><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"/><polyline points="14 2 14 8 20 8"/></svg>
-                            <span class="text-[8px] font-mono px-2 truncate w-full text-center">${asset.name.split('.').pop()?.toUpperCase() || 'FILE'}</span>
-                        `;
-                        div.appendChild(icon);
-                    }
-
-                    const label = document.createElement('div');
-                    label.className = "absolute bottom-0 left-0 right-0 p-2 bg-crust/95 text-[9px] truncate text-center opacity-0 group-hover:opacity-100 transition-opacity border-t border-white/5";
-                    label.textContent = asset.name;
-                    div.appendChild(label);
-
-                    div.addEventListener('click', () => {
-                        insertMarkdown(asset.name, asset.url);
-                        assetsModal?.classList.add('hidden');
-                    });
-
-                    assetsGrid.appendChild(div);
-                });
-            }
+            // Listen for asset selection from the component
+            document.addEventListener('asset-selected', (ev: any) => {
+                const asset = ev.detail;
+                insertMarkdown(asset.name, asset.url);
+                assetsModal?.classList.add('hidden');
+            });
 
             function insertMarkdown(name: string, url: string) {
                 const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(name);
@@ -228,28 +154,30 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 editor.focus();
             }
 
-            editor.on('inputRead', (cm: any, change: any) => {
+            // Autocomplete Logic
+            editor.on('inputRead', async (cm: any, change: any) => {
                 if (change.text && change.text.length === 1 && (change.text[0] === '/' || change.text[0] === '!')) {
-                    showAutocomplete();
+                    const res = await fetch('/api/uploads', {
+                        headers: { 'Authorization': `Bearer ${token}` }
+                    });
+                    if (res.ok) {
+                        const allAssets = await res.json();
+                        showAutocomplete(allAssets);
+                    }
                 } else if (change.text && change.text[0] === ' ') {
                     hideAutocomplete();
                 }
             });
 
-            async function showAutocomplete() {
-                if (allAssets.length === 0) await fetchAssets();
-                if (allAssets.length === 0) return;
-
+            function showAutocomplete(assets: any[]) {
                 if (!autocomplete || !autocompleteList) return;
-
                 const cursor = editor.cursorCoords(true, 'local');
-
                 autocomplete.classList.remove('hidden');
                 autocomplete.style.top = `${cursor.bottom + 10}px`;
                 autocomplete.style.left = `${cursor.left}px`;
 
                 autocompleteList.innerHTML = '';
-                allAssets.slice(0, 8).forEach(asset => {
+                assets.slice(0, 8).forEach(asset => {
                     const li = document.createElement('li');
                     li.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";
                     const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
@@ -264,11 +192,9 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                         const cursor = doc.getCursor();
                         const line = doc.getLine(cursor.line);
                         const triggerIndex = Math.max(line.lastIndexOf('/'), line.lastIndexOf('!'));
-                        
                         if (triggerIndex !== -1) {
                             doc.replaceRange('', {line: cursor.line, ch: triggerIndex}, cursor);
                         }
-                        
                         insertMarkdown(asset.name, asset.url);
                         hideAutocomplete();
                     });
@@ -286,34 +212,6 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 }
             });
 
-            fileInput?.addEventListener('change', async (ev) => {
-                const file = (ev.target as HTMLInputElement).files?.[0];
-                if (!file) return;
-
-                const formData = new FormData();
-                formData.append('file', file);
-
-                try {
-                    const res = await fetch('/api/upload', {
-                        method: 'POST',
-                        headers: { 'Authorization': `Bearer ${token}` },
-                        body: formData
-                    });
-
-                    if (res.ok) {
-                        const data = await res.json();
-                        insertMarkdown(file.name, data.url);
-                        showAlert('File uploaded and linked!', 'success');
-                    } else {
-                        const err = await res.json();
-                        showAlert(`Upload failed: ${err.error}`, 'error');
-                    }
-                } catch (err) {
-                    showAlert('Network error during upload.', 'error');
-                }
-                fileInput.value = '';
-            });
-
             saveBtn?.addEventListener('click', async () => {
                 const payload = { 
                     slug: slugInput.value, 
@@ -336,7 +234,7 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                     });
                     if (res.ok) {
                         showAlert('Post saved!', 'success');
-                        originalSlug = payload.slug; // Update for next save
+                        originalSlug = payload.slug;
                         if (viewPostBtn) {
                             viewPostBtn.href = `/posts/${payload.slug}`;
                             viewPostBtn.classList.remove('hidden');
@@ -383,12 +281,8 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
                 fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
                     .then(res => res.json())
                     .then(data => { 
-                        if (data.summary) {
-                            summaryInput.value = data.summary;
-                        }
-                        if (data.content) {
-                            editor.setValue(data.content);
-                        }
+                        if (data.summary) summaryInput.value = data.summary;
+                        if (data.content) editor.setValue(data.content);
                     })
                     .catch(() => showAlert('Failed to load post.', 'error'));
             }
diff --git a/frontend/src/pages/admin/index.astro b/frontend/src/pages/admin/index.astro
index 57f354c..e814bf5 100644
--- a/frontend/src/pages/admin/index.astro
+++ b/frontend/src/pages/admin/index.astro
@@ -7,27 +7,39 @@ import AdminLayout from '../../layouts/AdminLayout.astro';
         Logout
     </button>
 
-    <div class="grid md:grid-cols-2 gap-8 mb-12">
+    <div class="grid md:grid-cols-3 gap-8 mb-12">
         <a href="/admin/editor" class="group">
-            <div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex items-center gap-6">
-                <div class="bg-mauve/20 p-4 rounded-lg text-mauve">
+            <div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
+                <div class="bg-mauve/20 p-4 rounded-full text-mauve">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                 </div>
                 <div>
-                    <h2 class="text-2xl font-bold text-lavender group-hover:text-mauve transition-colors">Write a Post</h2>
-                    <p class="text-subtext0">Create or edit markdown posts and upload any file.</p>
+                    <h2 class="text-xl font-bold text-lavender group-hover:text-mauve transition-colors">Write Post</h2>
+                    <p class="text-xs text-subtext0 mt-1">Create or edit markdown posts.</p>
+                </div>
+            </div>
+        </a>
+
+        <a href="/admin/assets" class="group">
+            <div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
+                <div class="bg-teal/20 p-4 rounded-full text-teal">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
+                </div>
+                <div>
+                    <h2 class="text-xl font-bold text-teal group-hover:text-green transition-colors">Asset Library</h2>
+                    <p class="text-xs text-subtext0 mt-1">Manage images and uploads.</p>
                 </div>
             </div>
         </a>
         
         <a href="/admin/settings" class="group">
-            <div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex items-center gap-6">
-                <div class="bg-blue/20 p-4 rounded-lg text-blue">
+            <div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
+                <div class="bg-blue/20 p-4 rounded-full text-blue">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                 </div>
                 <div>
-                    <h2 class="text-2xl font-bold text-blue mb-2 group-hover:text-sky transition-colors">Site Settings</h2>
-                    <p class="text-subtext0">Update title, favicon, and global theme.</p>
+                    <h2 class="text-xl font-bold text-blue group-hover:text-sky transition-colors">Settings</h2>
+                    <p class="text-xs text-subtext0 mt-1">Site title and themes.</p>
                 </div>
             </div>
         </a>