From f5c8e9ee23ca1f387a7beb88e7407c2a3c07e7b2 Mon Sep 17 00:00:00 2001
From: pika <pika@team-pieck.de>
Date: Thu, 17 Apr 2025 12:05:22 +0200
Subject: [PATCH] wip

---
 app/routes.py                         |  57 ++--
 app/templates/base.html               | 194 ++++++++++++-
 app/templates/category_documents.html | 397 +++++++++++++++++++++++++-
 app/templates/category_edit.html      | 152 +++++++++-
 4 files changed, 756 insertions(+), 44 deletions(-)

diff --git a/app/routes.py b/app/routes.py
index c05f308..76f055f 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -296,28 +296,49 @@ def delete_category(category_id):
     if category.is_root:
         return jsonify({'error': 'Cannot delete root category'}), 400
     
-    # Get target category for documents if specified
-    new_category_id = request.args.get('new_category_id')
-    if new_category_id:
-        new_category = Category.query.filter_by(id=new_category_id, user_id=current_user.id).first()
-        if new_category:
-            # Reassign documents
-            for doc in category.documents:
-                doc.category_id = new_category.id
-    else:
-        # Move documents to no category
+    # Check if we should preserve contents
+    preserve_contents = request.args.get('preserve_contents', 'false').lower() == 'true'
+    
+    # Find parent category or root
+    parent_category = None
+    if category.parent_id:
+        parent_category = Category.query.filter_by(id=category.parent_id, user_id=current_user.id).first()
+    
+    if not parent_category:
+        # If no parent or parent not found, use root category
+        parent_category = Category.query.filter_by(user_id=current_user.id, is_root=True).first()
+    
+    if preserve_contents:
+        # Move documents to parent category
         for doc in category.documents:
-            doc.category_id = None
-    
-    # Also handle child categories
-    for child in category.children:
-        if new_category_id:
-            child.parent_id = new_category_id
-        else:
-            child.parent_id = None
+            doc.category_id = parent_category.id
+        
+        # Move child categories to parent
+        for child in category.children:
+            child.parent_id = parent_category.id
+    else:
+        # Delete all documents in this category
+        for doc in category.documents:
+            db.session.delete(doc)
+            
+        # Recursively delete subcategories and their documents
+        def delete_subcategories(parent):
+            for child in parent.children:
+                # Delete all documents in this subcategory
+                for doc in child.documents:
+                    db.session.delete(doc)
+                # Recursively delete subcategories
+                delete_subcategories(child)
+                # Delete the subcategory itself
+                db.session.delete(child)
+                
+        # Start recursive deletion
+        delete_subcategories(category)
     
+    # Delete the category itself
     db.session.delete(category)
     db.session.commit()
+    
     return jsonify({'success': True})
 
 @main.route('/api/search', methods=['GET'])
diff --git a/app/templates/base.html b/app/templates/base.html
index 3de4985..e68e656 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -397,23 +397,71 @@
                                 const docActions = document.createElement('div');
                                 docActions.className = 'actions absolute right-0 hidden group-hover:flex items-center bg-gray-800 px-1';
                                 
-                                // Edit doc button
-                                const editDocButton = document.createElement('button');
-                                editDocButton.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
-                                editDocButton.title = 'Edit Document';
-                                editDocButton.innerHTML = '<i class="mdi mdi-pencil-outline text-sm"></i>';
-                                editDocButton.addEventListener('click', function(e) {
+                                // Edit document button
+                                const editBtn = document.createElement('button');
+                                editBtn.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
+                                editBtn.title = 'Edit document';
+                                editBtn.innerHTML = '<i class="mdi mdi-pencil-outline text-sm"></i>';
+                                editBtn.addEventListener('click', function(e) {
                                     e.preventDefault();
                                     e.stopPropagation();
                                     window.location.href = `/document/${doc.id}/edit`;
                                 });
-                                docActions.appendChild(editDocButton);
+                                docActions.appendChild(editBtn);
+                                
+                                // Delete document button
+                                const deleteBtn = document.createElement('button');
+                                deleteBtn.className = 'p-1 text-gray-500 hover:text-red-500 rounded transition-colors';
+                                deleteBtn.title = 'Delete document';
+                                deleteBtn.innerHTML = '<i class="mdi mdi-delete-outline text-sm"></i>';
+                                deleteBtn.addEventListener('click', function(e) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    
+                                    // Show confirmation dialog
+                                    if (confirm(`Are you sure you want to delete "${doc.title}"? This cannot be undone.`)) {
+                                        // Send delete request
+                                        fetch(`/api/document/${doc.id}`, {
+                                            method: 'DELETE',
+                                            headers: {
+                                                'Content-Type': 'application/json',
+                                                'X-CSRFToken': getCsrfToken()
+                                            }
+                                        })
+                                        .then(response => {
+                                            if (!response.ok) {
+                                                throw new Error('Failed to delete');
+                                            }
+                                            return response.json();
+                                        })
+                                        .then(data => {
+                                            // Remove the document from the DOM
+                                            docLi.remove();
+                                            
+                                            // Show notification
+                                            showNotification('Document deleted successfully');
+                                            
+                                            // If we're on the document's page, redirect to the category or home
+                                            const currentPath = window.location.pathname;
+                                            if (currentPath === `/document/${doc.id}` || currentPath === `/document/${doc.id}/edit`) {
+                                                window.location.href = `/category/${category.id}`;
+                                            }
+                                        })
+                                        .catch(error => {
+                                            console.error('Error:', error);
+                                            showNotification('Error deleting document', 'error');
+                                        });
+                                    }
+                                });
+                                docActions.appendChild(deleteBtn);
                                 
                                 docLi.appendChild(docLink);
                                 docLi.appendChild(docActions);
                                 documentsUl.appendChild(docLi);
                             })
-                            .catch(error => console.error('Error fetching document:', error));
+                            .catch(error => {
+                                console.error(`Error fetching document ${docId}:`, error);
+                            });
                     });
                 }
                 
@@ -477,10 +525,12 @@
         }
         
         // Helper function to show notifications
-        function showNotification(message) {
+        function showNotification(message, type = 'success') {
             const notification = document.createElement('div');
-            notification.className = 'fixed bottom-4 right-4 bg-primary/90 text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300 flex items-center';
-            notification.innerHTML = `<i class="mdi mdi-check-circle mr-2"></i><span>${message}</span>`;
+            const bgColor = type === 'success' ? 'bg-green-600' : 'bg-red-600';
+            
+            notification.className = `fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300 z-50`;
+            notification.textContent = message;
             
             document.body.appendChild(notification);
             
@@ -490,7 +540,7 @@
             }, 3000);
         }
         
-        // Helper function to get CSRF token from meta tag
+        // Helper function to get CSRF token
         function getCsrfToken() {
             return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
         }
@@ -589,5 +639,125 @@
     
     <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
     {% block extra_js %}{% endblock %}
+    
+    <!-- Add this modal to the bottom of the body, before the closing body tag -->
+    <div id="delete-category-modal" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center hidden z-50">
+        <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+            <h3 class="text-lg font-medium text-slate-900 mb-4">Delete Category</h3>
+            <p class="text-slate-700 mb-2">Are you sure you want to delete "<span id="category-delete-name" class="font-medium"></span>"?</p>
+            
+            <div class="mt-4 space-y-3">
+                <div class="flex items-center">
+                    <input type="radio" id="preserve-documents" name="delete-option" value="preserve" class="mr-2" checked>
+                    <label for="preserve-documents" class="text-sm text-slate-700">
+                        Move documents and subcategories to parent category
+                    </label>
+                </div>
+                <div class="flex items-center">
+                    <input type="radio" id="delete-all" name="delete-option" value="delete" class="mr-2">
+                    <label for="delete-all" class="text-sm text-slate-700">
+                        Delete all documents and subcategories
+                    </label>
+                </div>
+            </div>
+            
+            <div class="mt-6 flex justify-end space-x-3">
+                <button id="cancel-delete-category" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-md hover:bg-slate-200">
+                    Cancel
+                </button>
+                <button id="confirm-delete-category" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Add this JavaScript at the bottom of the file, before the closing body tag -->
+    <script>
+    // Category deletion functionality
+    const categoryDeleteModal = document.getElementById('delete-category-modal');
+    const categoryNameSpan = document.getElementById('category-delete-name');
+    const cancelDeleteCategoryBtn = document.getElementById('cancel-delete-category');
+    const confirmDeleteCategoryBtn = document.getElementById('confirm-delete-category');
+    let currentCategoryId = null;
+
+    // Show notification function
+    function showNotification(message, type = 'success') {
+        const notification = document.createElement('div');
+        notification.className = `fixed bottom-4 right-4 p-4 rounded-md shadow-lg z-50 ${
+            type === 'success' ? 'bg-green-500' : 'bg-red-500'
+        } text-white`;
+        notification.textContent = message;
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.remove();
+        }, 3000);
+    }
+
+    // Show delete confirmation modal
+    document.querySelectorAll('.delete-category-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            // Close any open dropdown
+            document.querySelectorAll('.dropdown-menu:not(.hidden)').forEach(menu => {
+                menu.classList.add('hidden');
+            });
+            
+            const categoryId = this.getAttribute('data-category-id');
+            const categoryName = this.getAttribute('data-category-name');
+            
+            categoryNameSpan.textContent = categoryName;
+            currentCategoryId = categoryId;
+            categoryDeleteModal.classList.remove('hidden');
+        });
+    });
+
+    // Cancel category deletion
+    cancelDeleteCategoryBtn.addEventListener('click', function() {
+        categoryDeleteModal.classList.add('hidden');
+        currentCategoryId = null;
+    });
+
+    // Confirm category deletion
+    confirmDeleteCategoryBtn.addEventListener('click', function() {
+        if (currentCategoryId) {
+            const preserveContents = document.getElementById('preserve-documents').checked;
+            
+            // Send delete request to server
+            fetch(`/api/category/${currentCategoryId}?preserve_contents=${preserveContents}`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
+                }
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to delete category');
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Close the modal
+                categoryDeleteModal.classList.add('hidden');
+                
+                // Show a success message
+                showNotification('Category deleted successfully');
+                
+                // Reload the page to refresh the category tree
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showNotification('Error deleting category', 'error');
+            });
+        }
+    });
+    </script>
 </body>
 </html> 
\ No newline at end of file
diff --git a/app/templates/category_documents.html b/app/templates/category_documents.html
index 135edac..fd42daf 100644
--- a/app/templates/category_documents.html
+++ b/app/templates/category_documents.html
@@ -51,6 +51,104 @@
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         text-overflow: ellipsis;
+        transition: max-height 0.3s ease;
+    }
+    
+    .document-preview.expanded {
+        max-height: 20rem;
+        -webkit-line-clamp: unset;
+        overflow-y: auto;
+    }
+    
+    .document-preview.fully-expanded {
+        max-height: 60rem;
+        -webkit-line-clamp: unset;
+        overflow-y: auto;
+    }
+    
+    .preview-fold-btn {
+        display: block;
+        width: 100%;
+        text-align: center;
+        padding: 0.25rem;
+        color: #58a6ff;
+        background-color: rgba(88, 166, 255, 0.05);
+        border-radius: 0.25rem;
+        cursor: pointer;
+        font-size: 0.75rem;
+        margin-top: 0.5rem;
+        transition: background-color 0.2s ease;
+    }
+    
+    .preview-fold-btn:hover {
+        background-color: rgba(88, 166, 255, 0.1);
+    }
+    
+    .document-preview .markdown-content {
+        font-size: 0.875rem;
+    }
+    
+    .document-preview .markdown-content h1 {
+        font-size: 1.2rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content h2 {
+        font-size: 1.1rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content h3,
+    .document-preview .markdown-content h4,
+    .document-preview .markdown-content h5,
+    .document-preview .markdown-content h6 {
+        font-size: 1rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content p {
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content ul,
+    .document-preview .markdown-content ol {
+        padding-left: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content pre {
+        background-color: #1e1e2e;
+        padding: 0.5rem;
+        border-radius: 0.25rem;
+        overflow-x: auto;
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content blockquote {
+        border-left: 3px solid #30363d;
+        padding-left: 0.5rem;
+        color: #8b949e;
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content img {
+        max-width: 100%;
+        height: auto;
+    }
+    
+    .document-preview .markdown-content table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 0.5rem;
+    }
+    
+    .document-preview .markdown-content th,
+    .document-preview .markdown-content td {
+        border: 1px solid #30363d;
+        padding: 0.25rem 0.5rem;
     }
     
     .document-tag {
@@ -91,6 +189,49 @@
         background-color: rgba(80, 250, 123, 0.2);
         color: #50fa7b;
     }
+    
+    .document-actions {
+        display: flex;
+        gap: 0.25rem;
+    }
+    
+    .action-btn {
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        color: #8b949e;
+        transition: all 0.2s ease;
+    }
+    
+    .action-btn:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .action-btn.delete:hover {
+        color: #f85149;
+        background-color: rgba(248, 81, 73, 0.1);
+    }
+    
+    .confirm-delete-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 50;
+    }
+    
+    .confirm-delete-content {
+        background-color: #2d333b;
+        border-radius: 0.5rem;
+        width: 90%;
+        max-width: 28rem;
+        padding: 1.5rem;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    }
 </style>
 {% endblock %}
 
@@ -108,7 +249,7 @@
             
             <!-- View toggle -->
             <div class="view-toggle">
-                <button id="grid-view-btn" class="view-toggle-btn active">
+                <button id="grid-view-btn" class="view-toggle-btn active-view">
                     <i class="mdi mdi-view-grid"></i> Grid
                 </button>
                 <button id="list-view-btn" class="view-toggle-btn">
@@ -144,6 +285,9 @@
                                 <a href="{{ url_for('main.export_document', doc_id=doc.id) }}" class="block px-4 py-2 text-gray-300 hover:bg-gray-600 hover:text-white">
                                     <i class="mdi mdi-download-outline mr-2"></i> Export
                                 </a>
+                                <button class="delete-document-btn block w-full text-left px-4 py-2 text-red-400 hover:bg-gray-600 hover:text-red-300" data-doc-id="{{ doc.id }}" data-doc-title="{{ doc.title }}">
+                                    <i class="mdi mdi-delete-outline mr-2"></i> Delete
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -158,9 +302,13 @@
                     {% endif %}
                     
                     <div class="document-preview text-gray-400 text-sm mb-3">
-                        {{ doc.content[:200] }}{% if doc.content|length > 200 %}...{% endif %}
+                        <div class="markdown-content" data-content="{{ doc.content }}">
+                            <!-- Markdown will be rendered here -->
+                        </div>
                     </div>
                     
+                    <button class="preview-fold-btn" data-doc-id="{{ doc.id }}">Show more</button>
+                    
                     <div class="flex items-center justify-between mt-3 text-xs text-gray-500">
                         <div>
                             <i class="mdi mdi-clock-outline mr-1"></i> 
@@ -220,20 +368,29 @@
                             </div>
                             
                             <div class="document-preview text-gray-400 text-sm">
-                                {{ doc.content[:200] }}{% if doc.content|length > 200 %}...{% endif %}
+                                <div class="markdown-content" data-content="{{ doc.content }}">
+                                    <!-- Markdown will be rendered here -->
+                                </div>
                             </div>
+                            
+                            <button class="preview-fold-btn" data-doc-id="{{ doc.id }}-list">Show more</button>
                         </div>
                         
                         <div class="flex items-center mt-2 sm:mt-0">
-                            <a href="{{ url_for('main.view_document', doc_id=doc.id) }}" class="p-2 text-gray-400 hover:text-primary rounded" title="View">
-                                <i class="mdi mdi-eye-outline"></i>
-                            </a>
-                            <a href="{{ url_for('main.edit_document', doc_id=doc.id) }}" class="p-2 text-gray-400 hover:text-primary rounded" title="Edit">
-                                <i class="mdi mdi-pencil-outline"></i>
-                            </a>
-                            <a href="{{ url_for('main.export_document', doc_id=doc.id) }}" class="p-2 text-gray-400 hover:text-primary rounded" title="Export">
-                                <i class="mdi mdi-download-outline"></i>
-                            </a>
+                            <div class="document-actions">
+                                <a href="{{ url_for('main.view_document', doc_id=doc.id) }}" class="action-btn" title="View">
+                                    <i class="mdi mdi-eye-outline"></i>
+                                </a>
+                                <a href="{{ url_for('main.edit_document', doc_id=doc.id) }}" class="action-btn" title="Edit">
+                                    <i class="mdi mdi-pencil-outline"></i>
+                                </a>
+                                <a href="{{ url_for('main.export_document', doc_id=doc.id) }}" class="action-btn" title="Export">
+                                    <i class="mdi mdi-download-outline"></i>
+                                </a>
+                                <button class="action-btn delete delete-document-btn" title="Delete" data-doc-id="{{ doc.id }}" data-doc-title="{{ doc.title }}">
+                                    <i class="mdi mdi-delete-outline"></i>
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -259,11 +416,130 @@
         <p class="text-gray-500">Try a different search term</p>
     </div>
 </div>
+
+<!-- Delete confirmation modal -->
+<div id="delete-document-modal" class="confirm-delete-modal hidden">
+    <div class="confirm-delete-content">
+        <h3 class="text-lg font-medium text-white mb-4">Delete Document</h3>
+        <p class="text-gray-300 mb-6">Are you sure you want to delete "<span id="document-delete-name"></span>"? This action cannot be undone.</p>
+        <div class="flex justify-end space-x-3">
+            <button id="cancel-delete-doc" class="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors">
+                Cancel
+            </button>
+            <button id="confirm-delete-doc" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 transition-colors">
+                Delete
+            </button>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
+        // Set up Marked.js for markdown rendering
+        marked.setOptions({
+            gfm: true,
+            breaks: true,
+            sanitize: false,
+            highlight: function(code, lang) {
+                if (lang && hljs.getLanguage(lang)) {
+                    return hljs.highlight(code, { language: lang }).value;
+                }
+                return hljs.highlightAuto(code).value;
+            }
+        });
+        
+        // Custom renderer for alert blocks
+        const renderer = new marked.Renderer();
+        
+        // Fix blockquote renderer for GitHub-style alerts
+        const originalBlockquote = renderer.blockquote;
+        renderer.blockquote = function(quote) {
+            const text = quote.replace(/<\/?p>/g, '');
+            const admonitionRegex = /^\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION|DANGER)\]\s*([\s\S]*)/i;
+            const match = text.match(admonitionRegex);
+            
+            if (match) {
+                const type = match[1].toLowerCase();
+                const title = match[1].charAt(0).toUpperCase() + match[1].slice(1).toLowerCase();
+                const content = match[2] ? match[2].trim() : '';
+                
+                return `<div class="admonition admonition-${type}">
+                          <p class="admonition-title">${title}</p>
+                          <p>${content}</p>
+                        </div>`;
+            }
+            
+            return originalBlockquote.call(this, quote);
+        };
+        
+        marked.use({ renderer });
+        
+        // Render markdown content in document previews
+        document.querySelectorAll('.markdown-content').forEach(container => {
+            const content = container.getAttribute('data-content');
+            if (content) {
+                // Limit the content length for initial display
+                const previewLength = 300;
+                const shortenedContent = content.length > previewLength 
+                    ? content.substring(0, previewLength) + "..." 
+                    : content;
+                
+                container.innerHTML = marked.parse(shortenedContent);
+            }
+        });
+        
+        // Handle preview fold/unfold
+        const previewBtns = document.querySelectorAll('.preview-fold-btn');
+        previewBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const docId = this.getAttribute('data-doc-id');
+                const previewEl = this.previousElementSibling;
+                const markdownContainer = previewEl.querySelector('.markdown-content');
+                const content = markdownContainer.getAttribute('data-content');
+                
+                if (previewEl.classList.contains('expanded')) {
+                    if (previewEl.classList.contains('fully-expanded')) {
+                        // Collapse to normal preview
+                        previewEl.classList.remove('fully-expanded');
+                        previewEl.classList.remove('expanded');
+                        
+                        const previewLength = 300;
+                        const shortenedContent = content.length > previewLength 
+                            ? content.substring(0, previewLength) + "..." 
+                            : content;
+                        
+                        markdownContainer.innerHTML = marked.parse(shortenedContent);
+                        this.textContent = 'Show more';
+                    } else {
+                        // Expand to full view
+                        previewEl.classList.add('fully-expanded');
+                        markdownContainer.innerHTML = marked.parse(content);
+                        this.textContent = 'Show less';
+                    }
+                } else {
+                    // Expand to first level
+                    previewEl.classList.add('expanded');
+                    
+                    const previewLength = 1000;
+                    const shortenedContent = content.length > previewLength 
+                        ? content.substring(0, previewLength) + "..." 
+                        : content;
+                    
+                    markdownContainer.innerHTML = marked.parse(shortenedContent);
+                    this.textContent = content.length > previewLength ? 'Show even more' : 'Show less';
+                }
+                
+                // Apply syntax highlighting
+                previewEl.querySelectorAll('pre code').forEach(block => {
+                    hljs.highlightElement(block);
+                });
+            });
+        });
+        
         // View toggle functionality
         const gridViewBtn = document.getElementById('grid-view-btn');
         const listViewBtn = document.getElementById('list-view-btn');
@@ -355,6 +631,103 @@
             });
         });
         
+        // Delete document functionality
+        const deleteModal = document.getElementById('delete-document-modal');
+        const documentNameSpan = document.getElementById('document-delete-name');
+        const cancelDeleteBtn = document.getElementById('cancel-delete-doc');
+        const confirmDeleteBtn = document.getElementById('confirm-delete-doc');
+        let currentDocId = null;
+        
+        // Show delete confirmation modal
+        document.querySelectorAll('.delete-document-btn').forEach(btn => {
+            btn.addEventListener('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                
+                const docId = this.getAttribute('data-doc-id');
+                const docTitle = this.getAttribute('data-doc-title');
+                
+                documentNameSpan.textContent = docTitle;
+                currentDocId = docId;
+                deleteModal.classList.remove('hidden');
+            });
+        });
+        
+        // Cancel document deletion
+        cancelDeleteBtn.addEventListener('click', function() {
+            deleteModal.classList.add('hidden');
+            currentDocId = null;
+        });
+        
+        // Confirm document deletion
+        confirmDeleteBtn.addEventListener('click', function() {
+            if (currentDocId) {
+                // Send delete request to server
+                fetch(`/api/document/${currentDocId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
+                    }
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Failed to delete document');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // Remove the document from the DOM
+                    document.querySelectorAll(`[data-doc-id="${currentDocId}"]`).forEach(el => {
+                        const card = el.closest('.document-card, .document-item');
+                        if (card) {
+                            card.remove();
+                        }
+                    });
+                    
+                    // Close the modal
+                    deleteModal.classList.add('hidden');
+                    
+                    // Show a success message
+                    showNotification('Document deleted successfully');
+                    
+                    // Update count in the heading
+                    const countEl = document.querySelector('h2');
+                    if (countEl) {
+                        const count = document.querySelectorAll('.document-card').length;
+                        countEl.textContent = `All Documents (${count})`;
+                    }
+                    
+                    // Show "no results" if there are no documents left
+                    if (document.querySelectorAll('.document-card').length === 0) {
+                        noResults.classList.remove('hidden');
+                        gridView.classList.add('hidden');
+                        listView.classList.add('hidden');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    showNotification('Error deleting document', 'error');
+                });
+            }
+        });
+        
+        // Helper function to show notifications
+        function showNotification(message, type = 'success') {
+            const notification = document.createElement('div');
+            const bgColor = type === 'success' ? 'bg-green-600' : 'bg-red-600';
+            
+            notification.className = `fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300`;
+            notification.textContent = message;
+            
+            document.body.appendChild(notification);
+            
+            setTimeout(() => {
+                notification.classList.add('translate-y-16', 'opacity-0');
+                setTimeout(() => notification.remove(), 300);
+            }, 3000);
+        }
+        
         // Highlight current category in sidebar
         const sidebarCategories = document.querySelectorAll('.category-item');
         sidebarCategories.forEach(item => {
diff --git a/app/templates/category_edit.html b/app/templates/category_edit.html
index cf03319..4d95598 100644
--- a/app/templates/category_edit.html
+++ b/app/templates/category_edit.html
@@ -5,9 +5,17 @@
 {% block header_title %}{% if category %}Edit Category{% else %}New Category{% endif %}{% endblock %}
 
 {% block header_actions %}
-<button id="save-category" class="inline-flex items-center px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
+<button id="save-button" class="inline-flex items-center px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
     <i class="mdi mdi-content-save mr-2"></i> Save
 </button>
+<a href="{{ url_for('main.view_category', category_id=category.id) }}" class="inline-flex items-center px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors ml-2">
+    <i class="mdi mdi-arrow-left mr-2"></i> Back
+</a>
+{% if category and not category.is_root %}
+<button id="delete-category-btn" class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 transition-colors ml-2">
+    <i class="mdi mdi-delete mr-2"></i> Delete
+</button>
+{% endif %}
 {% endblock %}
 
 {% block content %}
@@ -181,12 +189,65 @@
     <i class="mdi mdi-check-circle mr-2"></i>
     <span>Category saved successfully!</span>
 </div>
+
+<!-- Delete Category Modal -->
+<div id="delete-category-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center hidden">
+    <div class="bg-gray-800 rounded-lg shadow-lg w-full max-w-md mx-4">
+        <div class="flex items-center justify-between p-4 border-b border-gray-700">
+            <h3 class="text-lg font-medium text-white">Delete Category</h3>
+            <button id="close-delete-modal" class="text-gray-400 hover:text-white">
+                <i class="mdi mdi-close text-lg"></i>
+            </button>
+        </div>
+        
+        <div class="p-6">
+            <p class="text-gray-300 mb-6">
+                Are you sure you want to delete <span class="font-semibold text-white">{{ category.name if category else 'this category' }}</span>?
+                {% if category and (category.documents.count() > 0 or category.children.count() > 0) %}
+                This category contains {{ category.documents.count() }} document(s) and {{ category.children.count() }} subcategory(ies).
+                {% endif %}
+            </p>
+            
+            {% if category and (category.documents.count() > 0 or category.children.count() > 0) %}
+            <div class="mb-6">
+                <p class="text-white mb-2">What should happen to the contents?</p>
+                <div class="space-y-3">
+                    <label class="flex items-start">
+                        <input type="radio" name="delete-option" value="move" class="mt-1 mr-2" checked>
+                        <div>
+                            <span class="text-gray-300">Move contents to parent/root category</span>
+                            <p class="text-xs text-gray-500">Documents and subcategories will be preserved and moved to the parent category</p>
+                        </div>
+                    </label>
+                    <label class="flex items-start">
+                        <input type="radio" name="delete-option" value="delete" class="mt-1 mr-2">
+                        <div>
+                            <span class="text-gray-300">Delete all contents</span>
+                            <p class="text-xs text-gray-500">All documents and subcategories will be permanently deleted</p>
+                        </div>
+                    </label>
+                </div>
+            </div>
+            {% endif %}
+            
+            <div class="flex justify-end space-x-3">
+                <button id="cancel-delete-btn" class="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition-colors">
+                    Cancel
+                </button>
+                <button id="confirm-delete-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 transition-colors">
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
 {% endblock %}
 
 {% block extra_js %}
 <script>
     document.addEventListener('DOMContentLoaded', function() {
-        const saveButton = document.getElementById('save-category');
+        const saveButton = document.getElementById('save-button');
         const nameInput = document.getElementById('category-name');
         const iconInput = document.getElementById('category-icon');
         const descriptionInput = document.getElementById('category-description');
@@ -444,6 +505,93 @@
         iconSearchInput.addEventListener('input', function() {
             populateIconsGrid(this.value);
         });
+
+        // Delete Category Functionality
+        const deleteBtn = document.getElementById('delete-category-btn');
+        const deleteModal = document.getElementById('delete-category-modal');
+        const closeDeleteModalBtn = document.getElementById('close-delete-modal');
+        const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
+        const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
+        
+        if (deleteBtn) {
+            deleteBtn.addEventListener('click', function() {
+                deleteModal.classList.remove('hidden');
+            });
+        }
+        
+        if (closeDeleteModalBtn) {
+            closeDeleteModalBtn.addEventListener('click', function() {
+                deleteModal.classList.add('hidden');
+            });
+        }
+        
+        if (cancelDeleteBtn) {
+            cancelDeleteBtn.addEventListener('click', function() {
+                deleteModal.classList.add('hidden');
+            });
+        }
+        
+        if (confirmDeleteBtn) {
+            confirmDeleteBtn.addEventListener('click', function() {
+                // Get selected option
+                const deleteOption = document.querySelector('input[name="delete-option"]:checked')?.value || 'move';
+                const queryParams = deleteOption === 'delete' ? '' : '?preserve_contents=true';
+                
+                // Send delete request
+                fetch(`/api/category/{{ category.id if category else '' }}${queryParams}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': '{{ csrf_token() }}'
+                    }
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Server responded with an error: ' + response.status);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    console.log("Category deleted successfully:", data);
+                    
+                    // Show save notification
+                    const notification = document.createElement('div');
+                    notification.className = 'fixed bottom-4 right-4 bg-primary/90 text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300';
+                    notification.innerHTML = '<i class="mdi mdi-check-circle mr-2"></i> Category deleted successfully';
+                    document.body.appendChild(notification);
+                    
+                    // Hide notification after 3 seconds
+                    setTimeout(() => {
+                        notification.classList.add('translate-y-16', 'opacity-0');
+                        setTimeout(() => notification.remove(), 300);
+                    }, 3000);
+                    
+                    // Redirect to home page or parent category
+                    setTimeout(() => {
+                        {% if category and category.parent_id %}
+                        window.location.href = '/category/{{ category.parent_id }}';
+                        {% else %}
+                        window.location.href = '/';
+                        {% endif %}
+                    }, 1000);
+                })
+                .catch(error => {
+                    console.error('Error deleting category:', error);
+                    
+                    // Show error notification
+                    const notification = document.createElement('div');
+                    notification.className = 'fixed bottom-4 right-4 bg-red-600/90 text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300';
+                    notification.innerHTML = '<i class="mdi mdi-alert-circle mr-2"></i> Error deleting category';
+                    document.body.appendChild(notification);
+                    
+                    // Hide notification after 3 seconds
+                    setTimeout(() => {
+                        notification.classList.add('translate-y-16', 'opacity-0');
+                        setTimeout(() => notification.remove(), 300);
+                    }, 3000);
+                });
+            });
+        }
     });
 </script>
 {% endblock %} 
\ No newline at end of file