feat: update version to 0.4.3-dev, add file deletion feature, and refactor API structure

frontend/templates/files.html

@@ -4,6 +4,43 @@
 {% block head_extra %}
   <!-- Include Grid.js CSS -->
   <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    .delete-btn {
+      color: #e53e3e;
+      cursor: pointer;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .delete-btn:hover {
+      background-color: #fed7d7;
+    }
+    .confirm-delete-modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+    }
+    .confirm-delete-content {
+      background-color: white;
+      padding: 1.5rem;
+      border-radius: 0.5rem;
+      max-width: 500px;
+      width: 90%;
+    }
+    .hidden {
+      display: none;
+    }
+  </style>
 {% endblock %}
 
 {% block content %}
@@ -11,6 +48,27 @@
   <h2 class="text-3xl font-bold mb-6">File Records</h2>
   <!-- Grid.js will render the table in this container -->
   <div id="gridjs-wrapper"></div>
+  
+  <!-- Confirmation Modal -->
+  <div id="confirmDeleteModal" class="confirm-delete-modal hidden">
+    <div class="confirm-delete-content">
+      <h3 class="text-lg font-medium text-gray-900 mb-4">Confirm Deletion</h3>
+      <p class="text-sm text-gray-500 mb-4">
+        Are you sure you want to delete this file record? This action cannot be undone.
+      </p>
+      <p class="text-sm text-gray-700 mb-4">
+        <strong>File:</strong> <span id="deleteFileName"></span>
+      </p>
+      <div class="flex justify-end space-x-3">
+        <button id="cancelDelete" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">
+          Cancel
+        </button>
+        <button id="confirmDelete" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
 </div>
 {% endblock %}
 
@@ -18,13 +76,78 @@
   <!-- Include Grid.js JS -->
   <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
   <script>
-    new gridjs.Grid({
+    // File deletion handling
+    let fileToDelete = null;
+    const confirmDeleteModal = document.getElementById('confirmDeleteModal');
+    const deleteFileName = document.getElementById('deleteFileName');
+    const cancelDelete = document.getElementById('cancelDelete');
+    const confirmDelete = document.getElementById('confirmDelete');
+
+    // Close modal
+    function closeDeleteModal() {
+      confirmDeleteModal.classList.add('hidden');
+      fileToDelete = null;
+    }
+
+    // Show delete confirmation modal
+    function showDeleteModal(fileId, fileName) {
+      fileToDelete = { id: fileId, name: fileName };
+      deleteFileName.textContent = fileName || `ID: ${fileId}`;
+      confirmDeleteModal.classList.remove('hidden');
+    }
+
+    // Handle delete confirmation
+    confirmDelete.addEventListener('click', async function() {
+      if (!fileToDelete) return;
+      
+      try {
+        const response = await fetch(`/api/files/${fileToDelete.id}`, {
+          method: 'DELETE'
+        });
+        
+        if (response.ok) {
+          // Success - reload the grid
+          grid.forceRender();
+          closeDeleteModal();
+        } else {
+          // Show error
+          const error = await response.json();
+          alert(`Error: ${error.detail || 'Failed to delete file'}`);
+          closeDeleteModal();
+        }
+      } catch (err) {
+        console.error('Delete error:', err);
+        alert('An error occurred while deleting the file');
+        closeDeleteModal();
+      }
+    });
+
+    // Cancel delete
+    cancelDelete.addEventListener('click', closeDeleteModal);
+    confirmDeleteModal.addEventListener('click', function(e) {
+      if (e.target === confirmDeleteModal) closeDeleteModal();
+    });
+
+    // Initialize the grid
+    const grid = new gridjs.Grid({
       columns: [
         { id: 'id', name: 'ID' },
         { id: 'original_filename', name: 'Original Filename' },
-        { id: 'file_size', name: 'File Size' },
+        { id: 'file_size', name: 'File Size', formatter: (size) => `${(size / 1024).toFixed(2)} KB` },
         { id: 'mime_type', name: 'Mime Type' },
-        { id: 'created_at', name: 'Created At' }
+        { id: 'created_at', name: 'Created At' },
+        { 
+          id: 'actions',
+          name: 'Actions',
+          formatter: (_, row) => {
+            return gridjs.h('button', {
+              className: 'delete-btn',
+              onClick: () => showDeleteModal(row.cells[0].data, row.cells[1].data)
+            }, [
+              gridjs.h('i', { className: 'fas fa-trash' }),
+            ]);
+          }
+        }
       ],
       server: {
         url: '/api/files',
@@ -33,7 +156,8 @@
           file.original_filename || "",
           file.file_size,
           file.mime_type,
-          file.created_at || ""
+          file.created_at || "",
+          ""  // This cell will be rendered by the formatter
         ])
       },
       search: true,