scriptorium 0.6.1 → 0.7.2

data/ui/web/app/views/view_dashboard.erb

@@ -6,7 +6,7 @@
         body {
             font-family: Arial, sans-serif;
             margin: 0;
-            padding: 20px;
+            padding: 10px;
             background-color: #f5f5f5;
         }
         .container {
@@ -20,19 +20,19 @@
             line-height: 1;
         }
         .header p {
-            margin: 5px 0 0 0;
+            margin: 3px 0 0 0;
             font-size: 16px;
             opacity: 0.9;
         }
         .content {
-            padding: 20px;
+            padding: 10px;
         }
         .banner-section {
-            margin-bottom: 30px;
+            margin-bottom: 15px;
             text-align: center;
         }
         .banner-section h2 {
-            margin-bottom: 15px;
+            margin-bottom: 8px;
             color: #333;
         }
         .banner-display {
@@ -40,32 +40,32 @@
         .actions-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
+            gap: 10px;
+            margin-bottom: 15px;
         }
         .action-card {
             border: 1px solid #ddd;
             border-radius: 6px;
-            padding: 20px;
+            padding: 12px;
             text-align: center;
             transition: all 0.2s;
         }
         .action-card:hover {
             border-color: #007bff;
-            box-shadow: 0 2px 8px rgba(0,123,255,0.2);
+            box-shadow: 0 1px 4px rgba(0,123,255,0.2);
         }
         .action-card h3 {
-            margin: 0 0 10px 0;
+            margin: 0 0 6px 0;
             color: #333;
         }
         .action-card p {
-            margin: 0 0 15px 0;
+            margin: 0 0 8px 0;
             color: #666;
             font-size: 14px;
         }
         .btn {
             display: inline-block;
-            padding: 6px 12px;
+            padding: 4px 8px;
             background: #007bff;
             color: white;
             text-decoration: none;
@@ -84,55 +84,696 @@
         }
         .view-info {
             background: #f8f9fa;
-            padding: 15px;
+            padding: 10px;
             border-radius: 6px;
-            margin-bottom: 20px;
+            margin-bottom: 10px;
         }
         .view-info h3 {
-            margin: 0 0 10px 0;
+            margin: 0 0 6px 0;
             color: #333;
         }
         .view-info p {
-            margin: 5px 0;
+            margin: 3px 0;
             color: #666;
         }
         .config-buttons {
             display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
+            gap: 6px;
+            margin-bottom: 10px;
         }
         .button-group {
-            margin-top: 20px;
+            margin-top: 10px;
             text-align: center;
         }
+        
+        /* Hover actions styles */
+        .actions-container {
+            position: relative;
+            display: inline-block;
+        }
+        
+        .gear-icon {
+            font-size: 16px;
+            cursor: pointer;
+            color: #666;
+            display: inline-block;
+            height: 20px;
+            line-height: 20px;
+            vertical-align: middle;
+        }
+        
+        .action-icons {
+            display: none;
+            position: absolute;
+            top: 50%;
+            right: 100%;
+            transform: translateY(-50%);
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            padding: 4px;
+            z-index: 1000;
+            flex-direction: column;
+            gap: 2px;
+            justify-content: center;
+            align-items: center;
+            min-width: 40px;
+            margin-right: 8px;
+        }
+        
+        .action-icon {
+            font-size: 16px;
+            text-decoration: none;
+            margin: 0 1px;
+            transition: transform 0.2s;
+            display: inline-block;
+            height: 20px;
+            line-height: 20px;
+            vertical-align: middle;
+        }
+        
+        .action-icon:hover {
+            transform: scale(1.2);
+        }
+        
+        /* Show action icons on click, hide gear */
+        .actions-container.active .gear-icon {
+            display: none;
+        }
+        
+        .actions-container.active .action-icons {
+            display: flex;
+        }
+        
+        /* Fixed table column widths to prevent jittering */
+        .posts-table {
+            table-layout: fixed;
+        }
+        
+        .posts-table th:nth-child(1), .posts-table td:nth-child(1) { width: 3%; }  /* ID */
+        .posts-table th:nth-child(2), .posts-table td:nth-child(2) { width: 10%; } /* Published Date */
+        .posts-table th:nth-child(3), .posts-table td:nth-child(3) { width: 36%; } /* Title */
+        .posts-table th:nth-child(4), .posts-table td:nth-child(4) { width: 3%; }  /* Deploy - very narrow for arrow */
+        .posts-table th:nth-child(5), .posts-table td:nth-child(5) { width: 10%; } /* Status */
+        .posts-table th:nth-child(6), .posts-table td:nth-child(6) { width: 20%; } /* Other Views */
+        .posts-table th:nth-child(7), .posts-table td:nth-child(7) { width: 5%; }  /* Actions */
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
-            <h1>Dashboard for <%= @current_view.name %></h1>
+            <h1 style="margin-left: 0.5em;">Dashboard for <%= @current_view.name %></h1>
         </div>
         
         <div class="content">
             <div class="banner-section">
-                <div class="banner-display">
+                <div class="banner-display" id="header">
                     <%= @banner_svg %>
                 </div>
             </div>
             
             <div class="config-buttons">
-                <a href="/banner_config" class="btn">Configure Banner</a>
-                <a href="/navbar_config" class="btn">Configure Navbar</a>
-                <a href="/edit_pages" class="btn">Edit Pages</a>
+                <a href="#" class="btn" style="background: #17a2b8;" title="Preview locally" onclick="try{ showPreviewPopup(); }catch(e){}; window.open('/preview','_blank'); return false;">Preview</a>
+                <form method="post" action="/generate_view" style="display: inline;" onsubmit="showGeneratingPopup()">
+                    <input type="hidden" name="view_name" value="<%= @current_view.name %>">
+                    <button type="submit" class="btn" style="background: #007bff;">Generate</button>
+                </form>
+                <button type="button" class="btn" onclick="showUploadAssetForm()" style="background: #6c757d;">Upload Asset</button>
                 <a href="/asset_management" class="btn">Asset Management</a>
-                <a href="/" class="btn">Create Post</a>
+                <a href="/backup_management" class="btn" style="background: #fd7e14;" title="Backup and restore repository">Backup/Restore</a>
+                <a href="/deploy" class="btn" style="background: #28a745;" title="Deploy to server" onclick="showUploadingPopup()">Deploy</a>
+                <a href="/browse" class="btn" style="background: #6f42c1;" title="Browse deployed site">Browse</a>
                 <a href="/advanced_config" class="btn btn-secondary">Advanced Config</a>
             </div>
             
+            
+            <!-- Upload Asset Modal -->
+            <div id="uploadAssetModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
+                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; min-width: 400px;">
+                    <h3>Upload Asset to Post</h3>
+                    <form method="post" action="/upload_post_asset" enctype="multipart/form-data">
+                        <div style="margin-bottom: 15px;">
+                            <label for="post_id" style="display: block; margin-bottom: 5px; font-weight: bold;">Post ID:</label>
+                            <select id="post_id" name="post_id" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
+                                <option value="">Select a post...</option>
+                                <% @posts.each do |post| %>
+                                    <option value="<%= post.id %>">#<%= post.id %> - <%= post.title %></option>
+                                <% end %>
+                            </select>
+                        </div>
+                        <div style="margin-bottom: 15px;">
+                            <label for="asset_file" style="display: block; margin-bottom: 5px; font-weight: bold;">File:</label>
+                            <input type="file" id="asset_file" name="file" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
+                        </div>
+                        <div style="text-align: right;">
+                            <button type="button" onclick="hideUploadAssetForm()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-right: 10px;">Cancel</button>
+                            <button type="submit" style="background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Upload Asset</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            
+            <% if params[:error] %>
+                <div class="alert alert-danger" style="background: #f8d7da; color: #721c24; padding: 10px; border-radius: 4px; margin: 10px 0; border: 1px solid #f5c6cb;">
+                    <%= params[:error] %>
+                </div>
+            <% end %>
+            
+            <!-- Create Post Button -->
+            <div style="margin-bottom: 20px;">
+                <button type="button" onclick="toggleCreatePostForm()" id="createPostButton" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold;">Create Post</button>
+            </div>
+
+            <!-- Create Post Section (Hidden by default) -->
+            <div id="createPostSection" class="create-post-section" style="display: none; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px;">
+                <h3 style="margin-top: 0;">Create New Post</h3>
+                <form method="post" action="/create_post" id="createPostForm">
+                    <div style="display: flex; gap: 15px; align-items: end; flex-wrap: wrap;">
+                        <div style="flex: 1; min-width: 200px;">
+                            <label for="post_title" style="display: block; margin-bottom: 5px; font-weight: bold;">Title:</label>
+                            <input type="text" id="post_title" name="title" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
+                        </div>
+                        <div style="flex: 1; min-width: 200px;">
+                            <label for="post_blurb" style="display: block; margin-bottom: 5px; font-weight: bold;">Blurb:</label>
+                            <input type="text" id="post_blurb" name="blurb" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
+                        </div>
+                        <div style="flex: 1; min-width: 200px;">
+                            <label for="post_tags" style="display: block; margin-bottom: 5px; font-weight: bold;">Tags (comma-separated):</label>
+                            <input type="text" id="post_tags" name="tags" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
+                        </div>
+                    </div>
+                    
+                    <!-- View Selection -->
+                    <div style="margin-top: 15px;">
+                        <label style="display: block; margin-bottom: 8px; font-weight: bold;">Views:</label>
+                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+                            <% @views.each do |view| %>
+                                <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
+                                    <input type="checkbox" name="views[]" value="<%= view.name %>" 
+                                           <%= 'checked' if view.name == @current_view.name %> 
+                                           style="margin: 0;">
+                                    <span><%= view.name %></span>
+                                </label>
+                            <% end %>
+                        </div>
+                    </div>
+                    
+                    <!-- Form Buttons -->
+                    <div style="margin-top: 15px; text-align: right;">
+                        <button type="button" onclick="hideCreatePostForm()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-right: 10px;">Cancel</button>
+                        <button type="submit" style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Edit</button>
+                    </div>
+                </form>
+            </div>
+
+            <% if @posts && !@posts.empty? %>
+                <div class="posts-section">
+                    <h3>Posts (<%= @total_posts %> total)</h3>
+                    <!-- DEBUG: Total posts loaded: <%= @posts.length %>, Deleted posts: <%= @posts.select { |p| p.deleted }.length %> -->
+                    <div class="posts-table">
+                        <table class="posts-table" style="width: 90%; border-collapse: collapse; margin: 10px auto 10px 10px;">
+                            <thead>
+                                <tr style="background-color: #f2f2f2;">
+                                    <th style="padding: 6px; text-align: left; border: 1px solid #ddd;">ID</th>
+                                    <th style="padding: 6px; text-align: left; border: 1px solid #ddd;">Published</th>
+                                    <th style="padding: 6px; text-align: left; border: 1px solid #ddd; width: 36%;">Title</th>
+                                    <th style="padding: 6px; text-align: center; border: 1px solid #ddd;" title="Deployed? * = no"><svg width="28" height="28" viewBox="0 0 16 16" style="display: inline-block;"><polygon points="8,2 2,10 6,10 6,14 10,14 10,10 14,10" fill="#00aa00" stroke="#008800" stroke-width="0.5"/></svg></th>
+                                    <th style="padding: 6px; text-align: left; border: 1px solid #ddd; width: 10%;">Status</th>
+                                    <th style="padding: 6px; text-align: left; border: 1px solid #ddd; width: 20%;">Other Views</th>
+                                    <th style="padding: 6px; text-align: center; border: 1px solid #ddd; width: 5%;">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <% @posts.each do |post| %>
+                                    <tr style="<%= 'opacity: 0.6;' if post.deleted %>">
+                                        <!-- Col 1: ID -->
+                                        <td style="padding: 6px; border: 1px solid #ddd; font-family: monospace; text-align: right;"><%= post.id %></td>
+                                        <!-- Col 2: Published Date -->
+                                        <td style="padding: 6px; border: 1px solid #ddd;"><%= post.pubdate ? post.pubdate.split(' ').first : '—' %></td>
+                                        <!-- Col 3: Title -->
+                                        <td style="padding: 6px; border: 1px solid #ddd;">
+                                            <a href="#" onclick="openPostPreview(<%= post.id %>); return false;" style="color: #007bff; text-decoration: none; cursor: pointer; <%= 'text-decoration: line-through;' if post.deleted %>" title="Preview <%= post.title %>">
+                                                <%= post.title %>
+                                            </a>
+                                        </td>
+                                        <!-- Col 4: Deploy Status -->
+                                        <td style="padding: 6px; border: 1px solid #ddd; text-align: center;">
+                                            <% if post.deleted %>
+                                                <!-- Deleted posts don't show deployment status -->
+                                            <% elsif post.meta["post.deployed"] == "yes" %>
+                                                <!-- Deployed - show nothing -->
+                                            <% else %>
+                                                <!-- Not deployed - show red asterisk -->
+                                                <span style="color: #dc3545; font-weight: bold; font-size: 18px;">*</span>
+                                            <% end %>
+                                        </td>
+                                        <!-- Col 5: Publication Status -->
+                                        <td style="padding: 6px; border: 1px solid #ddd; text-align: left;">
+                                            <% if post.deleted %>
+                                                <span style="color: #dc3545; font-weight: bold;" title="Deleted">deleted</span>
+                                            <% elsif post.meta["post.published"] == "no" %>
+                                                <span style="color: #666;" title="Unpublished">unpublished</span>
+                                            <% elsif post.meta["post.published"] == "yes" %>
+                                                <span style="color: #28a745;" title="Published">published</span>
+                                            <% end %>
+                                        </td>
+                                        <!-- Col 6: Other Views -->
+                                        <td style="padding: 6px; border: 1px solid #ddd;">
+                                            <% other_views = post.views_array.reject { |v| v == @current_view.name } %>
+                                            <%= other_views.join(', ') %>
+                                        </td>
+                                        <!-- Col 7: Actions -->
+                                        <td style="padding: 6px; border: 1px solid #ddd; text-align: center;">
+                                            <div class="actions-container">
+                                                <span class="gear-icon">⚙️</span>
+                                                <div class="action-icons">
+                                                    <a href="/edit_post/<%= post.id %>" class="action-icon" title="Edit">✏️</a>
+                                                    <% if post.deleted %>
+                                                        <form method="post" action="/restore_post/<%= post.id %>" style="display: inline;">
+                            <button type="submit" class="action-icon" title="Restore" style="background: none; border: none; cursor: pointer; font-size: 16px;">🔄</button>
+                        </form>
+                                                    <% else %>
+                                                        <form method="post" action="/delete_post/<%= post.id %>" style="display: inline;">
+                                                        <button type="submit" class="action-icon" title="Delete" style="background: none; border: none; cursor: pointer; font-size: 16px;">🗑️</button>
+                                                    </form>
+                                                                                                    <button type="button" class="action-icon toggle-status-btn" data-post-id="<%= post.id %>" title="<%= post.meta["post.published"] == "no" ? 'Publish' : 'Unpublish' %>" style="background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 3px; color: #007bff;">
+                                                <% if post.meta["post.published"] == "no" %>
+                                                    PUBLISH
+                                                <% else %>
+                                                    UNPUBLISH
+                                                <% end %>
+                                            </button>
+                                                    <% end %>
+                                                </div>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                <% end %>
+                            </tbody>
+                        </table>
+                    </div>
+                    
+                    <% if @total_pages > 1 %>
+                        <div class="pagination" style="text-align: center; margin: 10px 0;">
+                            <div style="display: flex; justify-content: center; gap: 3px; flex-wrap: wrap;">
+                                <% if @current_page > 1 %>
+                                    <a href="/view/<%= @current_view.name %>?page=<%= @current_page - 1 %>" class="btn btn-secondary">&laquo; Previous</a>
+                                <% end %>
+                                
+                                <% 1.upto(@total_pages) do |page_num| %>
+                                    <% if page_num == @current_page %>
+                                        <span class="btn" style="background: #0056b3; cursor: default; font-size: 16px;"><%= page_num %></span>
+                                    <% else %>
+                                        <a href="/view/<%= @current_view.name %>?page=<%= page_num %>" class="btn"><%= page_num %></a>
+                                    <% end %>
+                                <% end %>
+                                
+                                <% if @current_page < @total_pages %>
+                                    <a href="/view/<%= @current_view.name %>?page=<%= @current_page + 1 %>" class="btn btn-secondary">Next &raquo;</a>
+                                <% end %>
+                            </div>
+                        </div>
+                    <% end %>
+                </div>
+            <% else %>
+                <div class="posts-section">
+                    <h3>Posts</h3>
+                    <p>No posts found in this view.</p>
+                </div>
+            <% end %>
+            
             <div class="button-group">
                 <a href="/" class="btn btn-secondary">Back to Main Dashboard</a>
             </div>
         </div>
     </div>
+    
+    <script>
+        // Global functions accessible from HTML onclick attributes
+        function ensureOverlay(id, text, bg) {
+            var el = document.getElementById(id);
+            if (!el) {
+                el = document.createElement('div');
+                el.id = id;
+                el.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 16px 22px; border-radius: 8px; z-index: 9999; color: white; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3);';
+                document.body.appendChild(el);
+            }
+            el.style.background = bg;
+            el.textContent = text;
+            el.style.display = 'block';
+            return el;
+        }
+        function showPreviewPopup() { try { ensureOverlay('preview-popup', 'Opening preview...', '#17a2b8'); } catch(e) {} }
+        
+        function toggleCreatePostForm() {
+            console.log('toggleCreatePostForm called');
+            let form = document.getElementById('createPostSection');
+            let button = document.getElementById('createPostButton');
+            console.log('Form element:', form);
+            console.log('Button element:', button);
+            console.log('Form display style:', form.style.display);
+            
+            if (form.style.display === 'none' || form.style.display === '') {
+                form.style.display = 'block';
+                button.textContent = 'Hide';
+                console.log('Showing form');
+            } else {
+                form.style.display = 'none';
+                button.textContent = 'Create Post';
+                console.log('Hiding form');
+            }
+        }
+        
+        function hideCreatePostForm() {
+            let form = document.getElementById('createPostSection');
+            let button = document.getElementById('createPostButton');
+            form.style.display = 'none';
+            button.textContent = 'Create Post';
+        }
+        
+        function openEditModal(postId) {
+            // Hide the create post form
+            hideCreatePostForm();
+            
+            // Show the edit modal
+            let modal = document.getElementById('editPostModal');
+            if (modal) {
+                modal.style.display = 'block';
+                // Load post content via AJAX
+                loadPostContent(postId);
+            }
+        }
+        
+        function closeEditModal() {
+            let modal = document.getElementById('editPostModal');
+            if (modal) {
+                modal.style.display = 'none';
+            }
+        }
+        
+        function loadPostContent(postId) {
+            // Set the post ID in the form
+            document.getElementById('editPostId').value = postId;
+            
+            // Set the form action to the correct route
+            document.getElementById('editPostForm').action = `/save_post/${postId}`;
+            
+            // Load post content via AJAX
+            fetch(`/api/post_content/${postId}`)
+                .then(response => response.text())
+                .then(content => {
+                    if (editor) {
+                        editor.setValue(content);
+                    } else {
+                        document.getElementById('editContent').value = content;
+                    }
+                })
+                .catch(error => {
+                    console.error('Error loading post content:', error);
+                    document.getElementById('editContent').value = 'Error loading post content.';
+                });
+        }
+        
+        function showUploadAssetForm() {
+            document.getElementById('uploadAssetModal').style.display = 'block';
+        }
+        
+        function hideUploadAssetForm() {
+            document.getElementById('uploadAssetModal').style.display = 'none';
+        }
+        
+        function showUploadingPopup() {
+            console.log('showUploadingPopup called');
+            let popup = document.getElementById('uploading-popup');
+            if (!popup) {
+                popup = document.createElement('div');
+                popup.id = 'uploading-popup';
+                popup.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 30px; border-radius: 8px; z-index: 1000; font-size: 16px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3); background: #17a2b8; color: white;';
+                popup.textContent = 'Uploading...';
+                document.body.appendChild(popup);
+                console.log('Created uploading popup');
+            }
+            popup.style.display = 'block';
+            console.log('Uploading popup should be visible');
+        }
+        
+        function hideUploadingPopup() {
+            console.log('hideUploadingPopup called');
+            let popup = document.getElementById('uploading-popup');
+            if (popup) {
+                popup.style.display = 'none';
+                console.log('Uploading popup hidden');
+            } else {
+                console.log('No uploading popup found to hide');
+            }
+        }
+        
+        function openPostPreview(postId) {
+            // Get the post data from the table to find the title and construct the slug
+            const postRow = document.querySelector(`a[onclick*="openPostPreview(${postId})"]`);
+            if (!postRow) {
+                console.error('Could not find post row for ID:', postId);
+                alert('Error: Could not find post');
+                return;
+            }
+            const postTitle = postRow.textContent.trim();
+            
+            // Construct the expected filename based on the pattern we saw
+            const paddedId = postId.toString().padStart(4, '0');
+            const slug = postTitle.toLowerCase()
+                .replace(/[^a-z0-9\s-]/g, '')  // Remove special chars
+                .replace(/\s+/g, '-')          // Replace spaces with hyphens
+                .replace(/-+/g, '-')           // Replace multiple hyphens with single
+                .replace(/^-|-$/g, '');        // Remove leading/trailing hyphens
+            
+            const filename = `${paddedId}-${slug}.html`;
+            const currentView = '<%= @current_view.name %>';
+            // Open the individual post file directly for the current view
+            const url = `/preview/${currentView}/posts/${filename}`;
+            
+            // Open in a new window
+            window.open(url, '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes');
+        }
+        
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            // Check if we should open the edit modal
+            const urlParams = new URLSearchParams(window.location.search);
+            const editPostId = urlParams.get('edit_post');
+            if (editPostId) {
+                openEditModal(editPostId);
+                // Clean up URL to remove edit_post parameter
+                const newUrl = window.location.pathname + (urlParams.get('message') ? '?message=' + encodeURIComponent(urlParams.get('message')) : '');
+                window.history.replaceState({}, document.title, newUrl);
+            }
+            
+            // Handle status toggle buttons
+            document.querySelectorAll('.toggle-status-btn').forEach(function(btn) {
+                btn.addEventListener('click', function() {
+                    const postId = this.getAttribute('data-post-id');
+                    const button = this;
+                    
+                    // Show loading state
+                    button.style.opacity = '0.5';
+                    
+                    fetch('/toggle_post_status/' + postId, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        }
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Update the button text and title
+                                                    if (data.published) {
+                            button.innerHTML = 'UNPUBLISH';
+                            button.title = 'Unpublish';
+                            button.setAttribute('data-published', 'true');
+                        } else {
+                            button.innerHTML = 'PUBLISH';
+                            button.title = 'Publish';
+                            button.setAttribute('data-published', 'false');
+                        }
+                        
+                        // Update the status column
+                        const statusCell = button.closest('tr').querySelector('td:nth-child(4)');
+                        console.log('Status cell found:', statusCell);
+                        console.log('Current status cell content:', statusCell.innerHTML);
+                        
+                        if (data.published) {
+                            // Published - show published status
+                            statusCell.innerHTML = '<span style="color: #28a745;" title="Published">published</span>';
+                            console.log('Status updated to published');
+                        } else {
+                            // Unpublished - show unpublished status
+                            statusCell.innerHTML = '<span style="color: #666;" title="Unpublished">unpublished</span>';
+                            console.log('Status updated to unpublished');
+                        }
+                            
+                            // Also update the button's data attribute for future toggles
+                            button.setAttribute('data-published', data.published.toString());
+                            
+                            // Show success message temporarily
+                            showMessage(data.message, 'success');
+                        } else {
+                            showMessage('Failed to toggle status', 'error');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        showMessage('Failed to toggle status', 'error');
+                    })
+                    .finally(() => {
+                        button.style.opacity = '1';
+                    });
+                });
+            });
+            
+            function showMessage(message, type) {
+                // Create or update message element
+                let messageEl = document.getElementById('status-message');
+                if (!messageEl) {
+                    messageEl = document.createElement('div');
+                    messageEl.id = 'status-message';
+                    messageEl.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px 25px; border-radius: 8px; z-index: 1000; font-size: 16px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3);';
+                    document.body.appendChild(messageEl);
+                }
+                
+                messageEl.textContent = message;
+                messageEl.style.background = type === 'success' ? '#28a745' : '#dc3545';
+                messageEl.style.color = 'white';
+                
+                // Hide after 3 seconds
+                setTimeout(() => {
+                    messageEl.style.display = 'none';
+                }, 3000);
+            }
+            
+
+            
+            // Check for deployment success message in URL parameters
+            const deployParams = new URLSearchParams(window.location.search);
+            const deployMessage = deployParams.get('deploy_success');
+            const hideUploading = deployParams.get('hide_uploading');
+            
+            if (deployMessage) {
+                showMessage(deployMessage, 'success');
+                // Clean up URL
+                const newUrl = window.location.pathname;
+                window.history.replaceState({}, document.title, newUrl);
+            }
+            
+            // Clean up any message parameters
+            const message = urlParams.get('message');
+            if (message) {
+                showMessage(message, 'success');
+                // Clean up URL after showing message
+                setTimeout(() => {
+                    const newUrl = window.location.pathname;
+                    window.history.replaceState({}, document.title, newUrl);
+                }, 1000);
+            }
+            
+            // Hide uploading popup if deployment completed
+            if (hideUploading) {
+                hideUploadingPopup();
+            }
+            
+            // Add click handlers for action containers
+            document.querySelectorAll('.actions-container').forEach(container => {
+                container.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    // Close all other action containers
+                    document.querySelectorAll('.actions-container.active').forEach(active => {
+                        if (active !== this) {
+                            active.classList.remove('active');
+                        }
+                    });
+                    // Toggle this container
+                    this.classList.toggle('active');
+                });
+            });
+            
+            // Close action containers when clicking elsewhere
+            document.addEventListener('click', function() {
+                document.querySelectorAll('.actions-container.active').forEach(container => {
+                    container.classList.remove('active');
+                });
+            });
+        });
+    </script>
+    
+    <!-- Edit Post Modal -->
+    <div id="editPostModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
+        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; width: 80vw; height: 80vh; max-width: 1200px; max-height: 800px; display: flex; flex-direction: column;">
+            <!-- Modal Header -->
+            <div style="padding: 20px; border-bottom: 1px solid #ddd;">
+                <h2 style="margin: 0;">Edit Post</h2>
+            </div>
+            
+            <!-- Modal Content -->
+            <div style="flex: 1; padding: 20px; overflow: hidden;">
+                <form id="editPostForm" method="post" onsubmit="syncCodeMirrorContent()">
+                    <input type="hidden" id="editPostId" name="post_id" value="">
+                    <div style="height: 100%; display: flex; flex-direction: column;">
+                        <label for="editContent" style="margin-bottom: 10px; font-weight: bold;">Post Content:</label>
+                        <textarea name="content" id="editContent" placeholder="Enter your post content here..." style="flex: 1; font-family: monospace; font-size: 14px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; resize: none;"></textarea>
+                    </div>
+                </form>
+            </div>
+            
+            <!-- Modal Footer -->
+            <div style="padding: 20px; border-top: 1px solid #ddd; text-align: right;">
+                <button type="button" onclick="closeEditModal()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-right: 10px;">Cancel</button>
+                <button type="submit" form="editPostForm" style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Save Post</button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- CodeMirror CSS and JS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+    
+    <script>
+        let editor = null;
+        
+        function syncCodeMirrorContent() {
+            if (editor) {
+                document.getElementById('editContent').value = editor.getValue();
+            }
+        }
+        
+        
+        // Initialize CodeMirror when modal opens
+        function initCodeMirror() {
+            if (!editor) {
+                editor = CodeMirror.fromTextArea(document.getElementById('editContent'), {
+                    mode: 'livetext',
+                    theme: 'monokai',
+                    lineNumbers: true,
+                    lineWrapping: false,
+                    indentUnit: 2,
+                    tabSize: 2,
+                    indentWithTabs: false,
+                    scrollbarStyle: 'native',
+                    viewportMargin: Infinity
+                });
+                
+                // Hide the original textarea
+                document.getElementById('editContent').style.display = 'none';
+            }
+        }
+        
+        // Override openEditModal to initialize CodeMirror
+        const originalOpenEditModal = openEditModal;
+        openEditModal = function(postId) {
+            originalOpenEditModal(postId);
+            setTimeout(initCodeMirror, 100); // Small delay to ensure modal is visible
+        };
+    </script>
 </body>
 </html>