| ```javascript |
| import store from './store.js'; |
| import router from './router.js'; |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| // Initialize Feather Icons |
| if (window.feather) { |
| feather.replace(); |
| } |
| |
| // Check auth state |
| if (!store.state.user) { |
| window.location.hash = '#/login'; |
| document.getElementById('app-container').classList.add('hidden'); |
| document.getElementById('auth-container').classList.remove('hidden'); |
| } else { |
| document.getElementById('app-container').classList.remove('hidden'); |
| document.getElementById('auth-container').classList.add('hidden'); |
| } |
| |
| // Set up event listeners |
| document.addEventListener('click', (e) => { |
| // Handle project clicks |
| if (e.target.closest('[data-project-id]')) { |
| const projectId = e.target.closest('[data-project-id]').getAttribute('data-project-id'); |
| window.location.hash = `#/projects/${projectId}`; |
| } |
| |
| // Handle bucket clicks |
| if (e.target.closest('[data-bucket-id]')) { |
| const bucketId = e.target.closest('[data-bucket-id]').getAttribute('data-bucket-id'); |
| window.location.hash = `#/buckets/${bucketId}`; |
| } |
| |
| // Handle file actions |
| if (e.target.closest('[data-file-id]')) { |
| const fileId = e.target.closest('[data-file-id]').getAttribute('data-file-id'); |
| const action = e.target.closest('[data-file-id]').getAttribute('data-action'); |
| |
| if (action === 'download') { |
| store.addNotification({ |
| id: Date.now(), |
| type: 'success', |
| message: 'Download started' |
| }); |
| } else if (action === 'delete') { |
| store.removeFile(fileId); |
| store.addNotification({ |
| id: Date.now(), |
| type: 'success', |
| message: 'File deleted' |
| }); |
| } |
| } |
| |
| // Handle API key deletion |
| if (e.target.closest('[data-key-id]')) { |
| const keyId = e.target.closest('[data-key-id]').getAttribute('data-key-id'); |
| store.removeApiKey(keyId); |
| store.addNotification({ |
| id: Date.now(), |
| type: 'success', |
| message: 'API key deleted' |
| }); |
| } |
| |
| // Handle create project button |
| if (e.target.closest('#create-project-btn')) { |
| const modal = document.createElement('bucketmaster-modal'); |
| modal.setAttribute('title', 'Create Project'); |
| modal.innerHTML = ` |
| <form id="create-project-form" class="space-y-4"> |
| <div> |
| <label class="block text-metal mb-1">Project Name</label> |
| <input type="text" required class="w-full px-3 py-2 border border-metal-200 rounded"> |
| </div> |
| <div class="pt-2"> |
| <bucketmaster-button type="submit">Create Project</bucketmaster-button> |
| </div> |
| </form> |
| `; |
| document.body.appendChild(modal); |
| } |
| |
| // Handle create bucket button |
| if (e.target.closest('#create-bucket-btn')) { |
| const modal = document.createElement('bucketmaster-modal'); |
| modal.setAttribute('title', 'Create Bucket'); |
| modal.innerHTML = ` |
| <form id="create-bucket-form" class="space-y-4"> |
| <div> |
| <label class="block text-metal mb-1">Bucket Name</label> |
| < |