Add development documentation and enhance SPA navigation with category/item detail views

- Add DEVELOPMENT.md with complete LXC environment setup guide
- Implement dynamic category tree with item navigation in sidebar
- Add category detail view with items list via AJAX
- Add item edit form with delete functionality
- Enhance SPA routing to support query parameters for categories/items
- Update Bootstrap styling with icons and improved navigation
- Include SQLite database in repository for development

public/js/app.js

@@ -40,12 +40,24 @@ document.addEventListener('DOMContentLoaded', function() {
             apiPath = '/api/items';
             pageTitle = 'Overview';
             routePath = '/';
-        } else if (path === '/categories') {
-            apiPath = '/api/categories';
-            pageTitle = 'Categories';
-        } else if (path === '/parts') {
-            apiPath = '/api/parts';
-            pageTitle = 'Parts';
+        } else if (path.startsWith('/categories')) {
+            if (path.includes('?category=')) {
+                const categoryId = path.split('?category=')[1];
+                apiPath = '/api/categories?category=' + categoryId;
+                pageTitle = 'Category Details';
+            } else {
+                apiPath = '/api/categories';
+                pageTitle = 'Categories';
+            }
+        } else if (path.startsWith('/parts')) {
+            if (path.includes('?item=')) {
+                const itemId = path.split('?item=')[1];
+                apiPath = '/api/parts?item=' + itemId;
+                pageTitle = 'Part Details';
+            } else {
+                apiPath = '/api/parts';
+                pageTitle = 'Parts';
+            }
         } else {
             // Fallback
             apiPath = '/api/items';
@@ -111,20 +123,23 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Initial page load
-    const initialPath = window.location.pathname === '/' ? '/items' : window.location.pathname;
-    fetchContent(initialPath, false);
-
-    // Load category tree
+    // Load category tree first
     fetch('/api/tree')
         .then(response => response.text())
         .then(html => {
-            document.querySelector('.sidebar').innerHTML = html;
+            const sidebarTree = document.getElementById('sidebar-tree');
+            if (sidebarTree) {
+                sidebarTree.innerHTML = html;
+            }
         })
         .catch(error => {
             console.error('Error loading tree:', error);
         });
 
+    // Initial page load
+    const initialPath = window.location.pathname === '/' ? '/items' : window.location.pathname;
+    fetchContent(initialPath, false);
+
     // Page-specific scripts (e.g., form submissions)
     function initPageSpecificScripts() {
         // Overview page: filter form
@@ -172,6 +187,31 @@ document.addEventListener('DOMContentLoaded', function() {
         document.querySelectorAll('.delete-category-btn').forEach(btn => {
             btn.addEventListener('click', handleDeleteCategory);
         });
+
+        // Item edit page: delete button
+        const deleteItemBtn = document.getElementById('deleteItemBtn');
+        if (deleteItemBtn) {
+            deleteItemBtn.addEventListener('click', function() {
+                const itemId = document.getElementById('edit_item_id').value;
+                if (confirm(window.translations.deletePartConfirm)) {
+                    fetch('/api/items/' + itemId, {
+                        method: 'DELETE'
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            fetchContent('/', false);
+                        } else {
+                            alert(data.error || 'Error deleting item');
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        alert('Error deleting item');
+                    });
+                }
+            });
+        }
     }
 
     // Handler functions