refactor: Modularize UI components and utilities

- Extract UI components into separate JS files
- Centralize configuration values in config.js
- Introduce a dedicated logger module
- Improve file tree drag-and-drop and undo functionality
- Refactor modal handling to a single manager
- Add URL routing support for SPA navigation
- Implement view mode for read-only access
This commit is contained in:
Mahmoud-Emad
2025-10-26 15:42:15 +03:00
parent 23a24d42e2
commit 0ed6bcf1f2
34 changed files with 4136 additions and 940 deletions

View File

@@ -30,10 +30,13 @@
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<span class="navbar-brand">
<!-- Left: Logo and Title -->
<span class="navbar-brand mb-0">
<i class="bi bi-markdown"></i> Markdown Editor
</span>
<div class="d-flex gap-2">
<!-- Center: Edit Mode Buttons -->
<div class="navbar-center d-flex gap-2">
<button id="newBtn" class="btn btn-success btn-sm">
<i class="bi bi-file-plus"></i> New
</button>
@@ -43,7 +46,13 @@
<button id="deleteBtn" class="btn btn-danger btn-sm">
<i class="bi bi-trash"></i> Delete
</button>
<button id="darkModeBtn" class="btn btn-secondary btn-sm">🌙</button>
</div>
<!-- Right: Dark Mode Toggle -->
<div class="navbar-right">
<button id="darkModeBtn" class="btn btn-secondary btn-sm">
<i class="bi bi-moon-fill"></i>
</button>
</div>
</div>
</nav>
@@ -126,7 +135,8 @@
</div>
<!-- Confirmation Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -178,16 +188,31 @@
<!-- Mermaid for diagrams -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<!-- Application Configuration (must load first) -->
<script src="/static/js/config.js"></script>
<script src="/static/js/logger.js"></script>
<script src="/static/js/event-bus.js"></script>
<script src="/static/js/utils.js"></script>
<script src="/static/js/notification-service.js"></script>
<!-- UI Components -->
<script src="/static/js/ui-utils.js" defer></script>
<script src="/static/js/context-menu.js" defer></script>
<script src="/static/js/file-upload.js" defer></script>
<script src="/static/js/dark-mode.js" defer></script>
<script src="/static/js/collection-selector.js" defer></script>
<script src="/static/js/editor-drop-handler.js" defer></script>
<!-- Core Application Modules -->
<script src="/static/js/webdav-client.js" defer></script>
<script src="/static/js/file-tree.js" defer></script>
<script src="/static/js/editor.js" defer></script>
<script src="/static/js/ui-utils.js" defer></script>
<script src="/static/js/confirmation.js" defer></script>
<script src="/static/js/file-tree-actions.js" defer></script>
<script src="/static/js/column-resizer.js" defer></script>
<script src="/static/js/app.js" defer></script>
<script src="/static/js/macro-parser.js" defer></script>
<script src="/static/js/macro-processor.js" defer></script>
<script src="/static/js/macro-parser.js" defer></script>
<script src="/static/js/macro-processor.js" defer></script>
</body>
</html>