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

.gitignore

@@ -0,0 +1,2 @@
+.venv
+server.log

collections/notes/new_folder/zeko.md

@@ -0,0 +1,2 @@
+# New File
+

collections/notes/test.md

@@ -1,10 +0,0 @@
-
-# test
-
-- 1
-- 2
-
-[2025 SeaweedFS Intro Slides.pdf](/notes/2025 SeaweedFS Intro Slides.pdf)
-
-
-

collections/notes/tests/test3.md

@@ -0,0 +1,426 @@
+# UI Code Refactoring Plan
+
+**Project:** Markdown Editor  
+**Date:** 2025-10-26  
+**Status:** In Progress
+
+---
+
+## Executive Summary
+
+This document outlines a comprehensive refactoring plan for the UI codebase to improve maintainability, remove dead code, extract utilities, and standardize patterns. The refactoring is organized into 6 phases with 14 tasks, prioritized by risk and impact.
+
+**Key Metrics:**
+
+- Total Lines of Code: ~3,587
+- Dead Code to Remove: 213 lines (6%)
+- Estimated Effort: 5-8 days
+- Risk Level: Mostly LOW to MEDIUM
+
+---
+
+## Phase 1: Analysis Summary
+
+### Files Reviewed
+
+**JavaScript Files (10):**
+
+- `/static/js/app.js` (484 lines)
+- `/static/js/column-resizer.js` (100 lines)
+- `/static/js/confirmation.js` (170 lines)
+- `/static/js/editor.js` (420 lines)
+- `/static/js/file-tree-actions.js` (482 lines)
+- `/static/js/file-tree.js` (865 lines)
+- `/static/js/macro-parser.js` (103 lines)
+- `/static/js/macro-processor.js` (157 lines)
+- `/static/js/ui-utils.js` (305 lines)
+- `/static/js/webdav-client.js` (266 lines)
+
+**CSS Files (6):**
+
+- `/static/css/variables.css` (32 lines)
+- `/static/css/layout.css`
+- `/static/css/file-tree.css`
+- `/static/css/editor.css`
+- `/static/css/components.css`
+- `/static/css/modal.css`
+
+**HTML Templates (1):**
+
+- `/templates/index.html` (203 lines)
+
+---
+
+## Issues Found
+
+### 🔴 HIGH PRIORITY
+
+1. **Deprecated Modal Code (Dead Code)**
+   - Location: `/static/js/file-tree-actions.js` lines 262-474
+   - Impact: 213 lines of unused code (44% of file)
+   - Risk: LOW to remove
+
+2. **Duplicated Event Bus Implementation**
+   - Location: `/static/js/app.js` lines 16-30
+   - Should be extracted to reusable module
+
+3. **Duplicated Debounce Function**
+   - Location: `/static/js/editor.js` lines 404-414
+   - Should be shared utility
+
+4. **Inconsistent Notification Usage**
+   - Mixed usage of `window.showNotification` vs `showNotification`
+
+5. **Duplicated File Download Logic**
+   - Location: `/static/js/file-tree.js` lines 829-839
+   - Should be shared utility
+
+6. **Hard-coded Values**
+   - Long-press threshold: 400ms
+   - Debounce delay: 300ms
+   - Drag preview width: 200px
+   - Toast delay: 3000ms
+
+### 🟡 MEDIUM PRIORITY
+
+7. **Global State Management**
+   - Location: `/static/js/app.js` lines 6-13
+   - Makes testing difficult
+
+8. **Duplicated Path Manipulation**
+   - `path.split('/').pop()` appears 10+ times
+   - `path.substring(0, path.lastIndexOf('/'))` appears 5+ times
+
+9. **Mixed Responsibility in ui-utils.js**
+   - Contains 6 different classes/utilities
+   - Should be split into separate modules
+
+10. **Deprecated Event Handler**
+    - Location: `/static/js/file-tree-actions.js` line 329
+    - Uses deprecated `onkeypress`
+
+### 🟢 LOW PRIORITY
+
+11. **Unused Function Parameters**
+12. **Magic Numbers in Styling**
+13. **Inconsistent Comment Styles**
+14. **Console.log Statements**
+
+---
+
+## Phase 2: Proposed Reusable Components
+
+### 1. Config Module (`/static/js/config.js`)
+
+Centralize all configuration values:
+
+```javascript
+export const Config = {
+    // Timing
+    LONG_PRESS_THRESHOLD: 400,
+    DEBOUNCE_DELAY: 300,
+    TOAST_DURATION: 3000,
+    
+    // UI
+    DRAG_PREVIEW_WIDTH: 200,
+    TREE_INDENT_PX: 12,
+    MOUSE_MOVE_THRESHOLD: 5,
+    
+    // Validation
+    FILENAME_PATTERN: /^[a-z0-9_]+(\.[a-z0-9_]+)*$/,
+    
+    // Storage Keys
+    STORAGE_KEYS: {
+        DARK_MODE: 'darkMode',
+        SELECTED_COLLECTION: 'selectedCollection',
+        LAST_VIEWED_PAGE: 'lastViewedPage',
+        COLUMN_DIMENSIONS: 'columnDimensions'
+    }
+};
+```
+
+### 2. Logger Module (`/static/js/logger.js`)
+
+Structured logging with levels:
+
+```javascript
+export class Logger {
+    static debug(message, ...args)
+    static info(message, ...args)
+    static warn(message, ...args)
+    static error(message, ...args)
+    static setLevel(level)
+}
+```
+
+### 3. Event Bus Module (`/static/js/event-bus.js`)
+
+Centralized event system:
+
+```javascript
+export class EventBus {
+    on(event, callback)
+    off(event, callback)
+    once(event, callback)
+    dispatch(event, data)
+    clear(event)
+}
+```
+
+### 4. Utilities Module (`/static/js/utils.js`)
+
+Common utility functions:
+
+```javascript
+export const PathUtils = {
+    getFileName(path),
+    getParentPath(path),
+    normalizePath(path),
+    joinPaths(...paths),
+    getExtension(path)
+};
+
+export const TimingUtils = {
+    debounce(func, wait),
+    throttle(func, wait)
+};
+
+export const DownloadUtils = {
+    triggerDownload(content, filename),
+    downloadAsBlob(blob, filename)
+};
+
+export const ValidationUtils = {
+    validateFileName(name, isFolder),
+    sanitizeFileName(name)
+};
+```
+
+### 5. Notification Service (`/static/js/notification-service.js`)
+
+Standardized notifications:
+
+```javascript
+export class NotificationService {
+    static success(message)
+    static error(message)
+    static warning(message)
+    static info(message)
+}
+```
+
+---
+
+## Phase 3: Refactoring Tasks
+
+### 🔴 HIGH PRIORITY
+
+**Task 1: Remove Dead Code**
+
+- Files: `/static/js/file-tree-actions.js`
+- Lines: 262-474 (213 lines)
+- Risk: LOW
+- Dependencies: None
+
+**Task 2: Extract Event Bus**
+
+- Files: NEW `/static/js/event-bus.js`, MODIFY `app.js`, `editor.js`
+- Risk: MEDIUM
+- Dependencies: None
+
+**Task 3: Create Utilities Module**
+
+- Files: NEW `/static/js/utils.js`, MODIFY multiple files
+- Risk: MEDIUM
+- Dependencies: None
+
+**Task 4: Create Config Module**
+
+- Files: NEW `/static/js/config.js`, MODIFY multiple files
+- Risk: LOW
+- Dependencies: None
+
+**Task 5: Standardize Notification Usage**
+
+- Files: NEW `/static/js/notification-service.js`, MODIFY multiple files
+- Risk: LOW
+- Dependencies: None
+
+### 🟡 MEDIUM PRIORITY
+
+**Task 6: Fix Deprecated Event Handler**
+
+- Files: `/static/js/file-tree-actions.js` line 329
+- Risk: LOW
+- Dependencies: None
+
+**Task 7: Refactor ui-utils.js**
+
+- Files: DELETE `ui-utils.js`, CREATE 5 new modules
+- Risk: HIGH
+- Dependencies: Task 5
+
+**Task 8: Standardize Class Export Pattern**
+
+- Files: All class files
+- Risk: MEDIUM
+- Dependencies: None
+
+**Task 9: Create Logger Module**
+
+- Files: NEW `/static/js/logger.js`, MODIFY multiple files
+- Risk: LOW
+- Dependencies: None
+
+**Task 10: Implement Download Action**
+
+- Files: `/static/js/file-tree-actions.js`
+- Risk: LOW
+- Dependencies: Task 3
+
+### 🟢 LOW PRIORITY
+
+**Task 11: Standardize JSDoc Comments**
+**Task 12: Extract Magic Numbers to CSS**
+**Task 13: Add Error Boundaries**
+**Task 14: Cache DOM Elements**
+
+---
+
+## Phase 4: Implementation Order
+
+### Step 1: Foundation (Do First)
+
+1. Create Config Module (Task 4)
+2. Create Logger Module (Task 9)
+3. Create Event Bus Module (Task 2)
+
+### Step 2: Utilities (Do Second)
+
+4. Create Utilities Module (Task 3)
+5. Create Notification Service (Task 5)
+
+### Step 3: Cleanup (Do Third)
+
+6. Remove Dead Code (Task 1)
+7. Fix Deprecated Event Handler (Task 6)
+
+### Step 4: Restructuring (Do Fourth)
+
+8. Refactor ui-utils.js (Task 7)
+9. Standardize Class Export Pattern (Task 8)
+
+### Step 5: Enhancements (Do Fifth)
+
+10. Implement Download Action (Task 10)
+11. Add Error Boundaries (Task 13)
+
+### Step 6: Polish (Do Last)
+
+12. Standardize JSDoc Comments (Task 11)
+13. Extract Magic Numbers to CSS (Task 12)
+14. Cache DOM Elements (Task 14)
+
+---
+
+## Phase 5: Testing Checklist
+
+### Core Functionality
+
+- [ ] File tree loads and displays correctly
+- [ ] Files can be selected and opened
+- [ ] Folders can be expanded/collapsed
+- [ ] Editor loads file content
+- [ ] Preview renders markdown correctly
+- [ ] Save button saves files
+- [ ] Delete button deletes files
+- [ ] New button creates new files
+
+### Context Menu Actions
+
+- [ ] Right-click shows context menu
+- [ ] New file action works
+- [ ] New folder action works
+- [ ] Rename action works
+- [ ] Delete action works
+- [ ] Copy/Cut/Paste actions work
+- [ ] Upload action works
+
+### Drag and Drop
+
+- [ ] Long-press detection works
+- [ ] Drag preview appears correctly
+- [ ] Drop targets highlight properly
+- [ ] Files can be moved
+- [ ] Undo (Ctrl+Z) works
+
+### Modals
+
+- [ ] Confirmation modals appear
+- [ ] Prompt modals appear
+- [ ] Modals don't double-open
+- [ ] Enter/Escape keys work
+
+### UI Features
+
+- [ ] Dark mode toggle works
+- [ ] Collection selector works
+- [ ] Column resizers work
+- [ ] Notifications appear
+- [ ] URL routing works
+- [ ] View/Edit modes work
+
+---
+
+## Recommendations
+
+### Immediate Actions (Before Production)
+
+1. Remove dead code (Task 1)
+2. Fix deprecated event handler (Task 6)
+3. Create config module (Task 4)
+
+### Short-term Actions (Next Sprint)
+
+4. Extract utilities (Task 3)
+5. Standardize notifications (Task 5)
+6. Create event bus (Task 2)
+
+### Medium-term Actions (Future Sprints)
+
+7. Refactor ui-utils.js (Task 7)
+8. Add logger (Task 9)
+9. Standardize exports (Task 8)
+
+---
+
+## Success Metrics
+
+**Before Refactoring:**
+
+- Total Lines: ~3,587
+- Dead Code: 213 lines (6%)
+- Duplicated Code: ~50 lines
+- Hard-coded Values: 15+
+
+**After Refactoring:**
+
+- Total Lines: ~3,400 (-5%)
+- Dead Code: 0 lines
+- Duplicated Code: 0 lines
+- Hard-coded Values: 0
+
+**Estimated Effort:** 5-8 days
+
+---
+
+## Conclusion
+
+The UI codebase is generally well-structured. Main improvements needed:
+
+1. Remove dead code
+2. Extract duplicated utilities
+3. Centralize configuration
+4. Standardize patterns
+
+Start with high-impact, low-risk changes first to ensure production readiness.

refactor-plan.md

@@ -0,0 +1,426 @@
+# UI Code Refactoring Plan
+
+**Project:** Markdown Editor  
+**Date:** 2025-10-26  
+**Status:** In Progress
+
+---
+
+## Executive Summary
+
+This document outlines a comprehensive refactoring plan for the UI codebase to improve maintainability, remove dead code, extract utilities, and standardize patterns. The refactoring is organized into 6 phases with 14 tasks, prioritized by risk and impact.
+
+**Key Metrics:**
+
+- Total Lines of Code: ~3,587
+- Dead Code to Remove: 213 lines (6%)
+- Estimated Effort: 5-8 days
+- Risk Level: Mostly LOW to MEDIUM
+
+---
+
+## Phase 1: Analysis Summary
+
+### Files Reviewed
+
+**JavaScript Files (10):**
+
+- `/static/js/app.js` (484 lines)
+- `/static/js/column-resizer.js` (100 lines)
+- `/static/js/confirmation.js` (170 lines)
+- `/static/js/editor.js` (420 lines)
+- `/static/js/file-tree-actions.js` (482 lines)
+- `/static/js/file-tree.js` (865 lines)
+- `/static/js/macro-parser.js` (103 lines)
+- `/static/js/macro-processor.js` (157 lines)
+- `/static/js/ui-utils.js` (305 lines)
+- `/static/js/webdav-client.js` (266 lines)
+
+**CSS Files (6):**
+
+- `/static/css/variables.css` (32 lines)
+- `/static/css/layout.css`
+- `/static/css/file-tree.css`
+- `/static/css/editor.css`
+- `/static/css/components.css`
+- `/static/css/modal.css`
+
+**HTML Templates (1):**
+
+- `/templates/index.html` (203 lines)
+
+---
+
+## Issues Found
+
+### 🔴 HIGH PRIORITY
+
+1. **Deprecated Modal Code (Dead Code)**
+   - Location: `/static/js/file-tree-actions.js` lines 262-474
+   - Impact: 213 lines of unused code (44% of file)
+   - Risk: LOW to remove
+
+2. **Duplicated Event Bus Implementation**
+   - Location: `/static/js/app.js` lines 16-30
+   - Should be extracted to reusable module
+
+3. **Duplicated Debounce Function**
+   - Location: `/static/js/editor.js` lines 404-414
+   - Should be shared utility
+
+4. **Inconsistent Notification Usage**
+   - Mixed usage of `window.showNotification` vs `showNotification`
+
+5. **Duplicated File Download Logic**
+   - Location: `/static/js/file-tree.js` lines 829-839
+   - Should be shared utility
+
+6. **Hard-coded Values**
+   - Long-press threshold: 400ms
+   - Debounce delay: 300ms
+   - Drag preview width: 200px
+   - Toast delay: 3000ms
+
+### 🟡 MEDIUM PRIORITY
+
+7. **Global State Management**
+   - Location: `/static/js/app.js` lines 6-13
+   - Makes testing difficult
+
+8. **Duplicated Path Manipulation**
+   - `path.split('/').pop()` appears 10+ times
+   - `path.substring(0, path.lastIndexOf('/'))` appears 5+ times
+
+9. **Mixed Responsibility in ui-utils.js**
+   - Contains 6 different classes/utilities
+   - Should be split into separate modules
+
+10. **Deprecated Event Handler**
+    - Location: `/static/js/file-tree-actions.js` line 329
+    - Uses deprecated `onkeypress`
+
+### 🟢 LOW PRIORITY
+
+11. **Unused Function Parameters**
+12. **Magic Numbers in Styling**
+13. **Inconsistent Comment Styles**
+14. **Console.log Statements**
+
+---
+
+## Phase 2: Proposed Reusable Components
+
+### 1. Config Module (`/static/js/config.js`)
+
+Centralize all configuration values:
+
+```javascript
+export const Config = {
+    // Timing
+    LONG_PRESS_THRESHOLD: 400,
+    DEBOUNCE_DELAY: 300,
+    TOAST_DURATION: 3000,
+    
+    // UI
+    DRAG_PREVIEW_WIDTH: 200,
+    TREE_INDENT_PX: 12,
+    MOUSE_MOVE_THRESHOLD: 5,
+    
+    // Validation
+    FILENAME_PATTERN: /^[a-z0-9_]+(\.[a-z0-9_]+)*$/,
+    
+    // Storage Keys
+    STORAGE_KEYS: {
+        DARK_MODE: 'darkMode',
+        SELECTED_COLLECTION: 'selectedCollection',
+        LAST_VIEWED_PAGE: 'lastViewedPage',
+        COLUMN_DIMENSIONS: 'columnDimensions'
+    }
+};
+```
+
+### 2. Logger Module (`/static/js/logger.js`)
+
+Structured logging with levels:
+
+```javascript
+export class Logger {
+    static debug(message, ...args)
+    static info(message, ...args)
+    static warn(message, ...args)
+    static error(message, ...args)
+    static setLevel(level)
+}
+```
+
+### 3. Event Bus Module (`/static/js/event-bus.js`)
+
+Centralized event system:
+
+```javascript
+export class EventBus {
+    on(event, callback)
+    off(event, callback)
+    once(event, callback)
+    dispatch(event, data)
+    clear(event)
+}
+```
+
+### 4. Utilities Module (`/static/js/utils.js`)
+
+Common utility functions:
+
+```javascript
+export const PathUtils = {
+    getFileName(path),
+    getParentPath(path),
+    normalizePath(path),
+    joinPaths(...paths),
+    getExtension(path)
+};
+
+export const TimingUtils = {
+    debounce(func, wait),
+    throttle(func, wait)
+};
+
+export const DownloadUtils = {
+    triggerDownload(content, filename),
+    downloadAsBlob(blob, filename)
+};
+
+export const ValidationUtils = {
+    validateFileName(name, isFolder),
+    sanitizeFileName(name)
+};
+```
+
+### 5. Notification Service (`/static/js/notification-service.js`)
+
+Standardized notifications:
+
+```javascript
+export class NotificationService {
+    static success(message)
+    static error(message)
+    static warning(message)
+    static info(message)
+}
+```
+
+---
+
+## Phase 3: Refactoring Tasks
+
+### 🔴 HIGH PRIORITY
+
+**Task 1: Remove Dead Code**
+
+- Files: `/static/js/file-tree-actions.js`
+- Lines: 262-474 (213 lines)
+- Risk: LOW
+- Dependencies: None
+
+**Task 2: Extract Event Bus**
+
+- Files: NEW `/static/js/event-bus.js`, MODIFY `app.js`, `editor.js`
+- Risk: MEDIUM
+- Dependencies: None
+
+**Task 3: Create Utilities Module**
+
+- Files: NEW `/static/js/utils.js`, MODIFY multiple files
+- Risk: MEDIUM
+- Dependencies: None
+
+**Task 4: Create Config Module**
+
+- Files: NEW `/static/js/config.js`, MODIFY multiple files
+- Risk: LOW
+- Dependencies: None
+
+**Task 5: Standardize Notification Usage**
+
+- Files: NEW `/static/js/notification-service.js`, MODIFY multiple files
+- Risk: LOW
+- Dependencies: None
+
+### 🟡 MEDIUM PRIORITY
+
+**Task 6: Fix Deprecated Event Handler**
+
+- Files: `/static/js/file-tree-actions.js` line 329
+- Risk: LOW
+- Dependencies: None
+
+**Task 7: Refactor ui-utils.js**
+
+- Files: DELETE `ui-utils.js`, CREATE 5 new modules
+- Risk: HIGH
+- Dependencies: Task 5
+
+**Task 8: Standardize Class Export Pattern**
+
+- Files: All class files
+- Risk: MEDIUM
+- Dependencies: None
+
+**Task 9: Create Logger Module**
+
+- Files: NEW `/static/js/logger.js`, MODIFY multiple files
+- Risk: LOW
+- Dependencies: None
+
+**Task 10: Implement Download Action**
+
+- Files: `/static/js/file-tree-actions.js`
+- Risk: LOW
+- Dependencies: Task 3
+
+### 🟢 LOW PRIORITY
+
+**Task 11: Standardize JSDoc Comments**
+**Task 12: Extract Magic Numbers to CSS**
+**Task 13: Add Error Boundaries**
+**Task 14: Cache DOM Elements**
+
+---
+
+## Phase 4: Implementation Order
+
+### Step 1: Foundation (Do First)
+
+1. Create Config Module (Task 4)
+2. Create Logger Module (Task 9)
+3. Create Event Bus Module (Task 2)
+
+### Step 2: Utilities (Do Second)
+
+4. Create Utilities Module (Task 3)
+5. Create Notification Service (Task 5)
+
+### Step 3: Cleanup (Do Third)
+
+6. Remove Dead Code (Task 1)
+7. Fix Deprecated Event Handler (Task 6)
+
+### Step 4: Restructuring (Do Fourth)
+
+8. Refactor ui-utils.js (Task 7)
+9. Standardize Class Export Pattern (Task 8)
+
+### Step 5: Enhancements (Do Fifth)
+
+10. Implement Download Action (Task 10)
+11. Add Error Boundaries (Task 13)
+
+### Step 6: Polish (Do Last)
+
+12. Standardize JSDoc Comments (Task 11)
+13. Extract Magic Numbers to CSS (Task 12)
+14. Cache DOM Elements (Task 14)
+
+---
+
+## Phase 5: Testing Checklist
+
+### Core Functionality
+
+- [ ] File tree loads and displays correctly
+- [ ] Files can be selected and opened
+- [ ] Folders can be expanded/collapsed
+- [ ] Editor loads file content
+- [ ] Preview renders markdown correctly
+- [ ] Save button saves files
+- [ ] Delete button deletes files
+- [ ] New button creates new files
+
+### Context Menu Actions
+
+- [ ] Right-click shows context menu
+- [ ] New file action works
+- [ ] New folder action works
+- [ ] Rename action works
+- [ ] Delete action works
+- [ ] Copy/Cut/Paste actions work
+- [ ] Upload action works
+
+### Drag and Drop
+
+- [ ] Long-press detection works
+- [ ] Drag preview appears correctly
+- [ ] Drop targets highlight properly
+- [ ] Files can be moved
+- [ ] Undo (Ctrl+Z) works
+
+### Modals
+
+- [ ] Confirmation modals appear
+- [ ] Prompt modals appear
+- [ ] Modals don't double-open
+- [ ] Enter/Escape keys work
+
+### UI Features
+
+- [ ] Dark mode toggle works
+- [ ] Collection selector works
+- [ ] Column resizers work
+- [ ] Notifications appear
+- [ ] URL routing works
+- [ ] View/Edit modes work
+
+---
+
+## Recommendations
+
+### Immediate Actions (Before Production)
+
+1. Remove dead code (Task 1)
+2. Fix deprecated event handler (Task 6)
+3. Create config module (Task 4)
+
+### Short-term Actions (Next Sprint)
+
+4. Extract utilities (Task 3)
+5. Standardize notifications (Task 5)
+6. Create event bus (Task 2)
+
+### Medium-term Actions (Future Sprints)
+
+7. Refactor ui-utils.js (Task 7)
+8. Add logger (Task 9)
+9. Standardize exports (Task 8)
+
+---
+
+## Success Metrics
+
+**Before Refactoring:**
+
+- Total Lines: ~3,587
+- Dead Code: 213 lines (6%)
+- Duplicated Code: ~50 lines
+- Hard-coded Values: 15+
+
+**After Refactoring:**
+
+- Total Lines: ~3,400 (-5%)
+- Dead Code: 0 lines
+- Duplicated Code: 0 lines
+- Hard-coded Values: 0
+
+**Estimated Effort:** 5-8 days
+
+---
+
+## Conclusion
+
+The UI codebase is generally well-structured. Main improvements needed:
+
+1. Remove dead code
+2. Extract duplicated utilities
+3. Centralize configuration
+4. Standardize patterns
+
+Start with high-impact, low-risk changes first to ensure production readiness.

server_webdav.py

@@ -78,27 +78,36 @@ class MarkdownEditorApp:
         # Root and index.html
         if path == '/' or path == '/index.html':
             return self.handle_index(environ, start_response)
-        
+
         # Static files
         if path.startswith('/static/'):
             return self.handle_static(environ, start_response)
-        
+
         # Health check
         if path == '/health' and method == 'GET':
             start_response('200 OK', [('Content-Type', 'text/plain')])
             return [b'OK']
-            
+
         # API for collections
         if path == '/fs/' and method == 'GET':
             return self.handle_collections_list(environ, start_response)
 
+        # Check if path starts with a collection name (for SPA routing)
+        # This handles URLs like /notes/ttt or /documents/file.md
+        # MUST be checked BEFORE WebDAV routing to prevent WebDAV from intercepting SPA routes
+        path_parts = path.strip('/').split('/')
+        if path_parts and path_parts[0] in self.collections:
+            # This is a SPA route for a collection, serve index.html
+            # The client-side router will handle the path
+            return self.handle_index(environ, start_response)
+
         # All other /fs/ requests go to WebDAV
         if path.startswith('/fs/'):
             return self.webdav_app(environ, start_response)
 
-        # Fallback for anything else (shouldn't happen with correct linking)
+        # Fallback: Serve index.html for all other routes (SPA routing)
-        start_response('404 Not Found', [('Content-Type', 'text/plain')])
+        # This allows client-side routing to handle any other paths
-        return [b'Not Found']
+        return self.handle_index(environ, start_response)
     
     def handle_collections_list(self, environ, start_response):
         """Return list of available collections"""

static/app-tree.js

@@ -1,5 +1,5 @@
 // Markdown Editor Application with File Tree
-(function() {
+(function () {
     'use strict';
 
     // State management
@@ -26,13 +26,13 @@
         document.body.classList.add('dark-mode');
         document.getElementById('darkModeIcon').textContent = '☀️';
         localStorage.setItem('darkMode', 'true');
-        
+
-        mermaid.initialize({ 
+        mermaid.initialize({
             startOnLoad: false,
             theme: 'dark',
             securityLevel: 'loose'
         });
-        
+
         if (editor && editor.getValue()) {
             updatePreview();
         }
@@ -43,13 +43,13 @@
         document.body.classList.remove('dark-mode');
         document.getElementById('darkModeIcon').textContent = '🌙';
         localStorage.setItem('darkMode', 'false');
-        
+
-        mermaid.initialize({ 
+        mermaid.initialize({
             startOnLoad: false,
             theme: 'default',
             securityLevel: 'loose'
         });
-        
+
         if (editor && editor.getValue()) {
             updatePreview();
         }
@@ -64,7 +64,7 @@
     }
 
     // Initialize Mermaid
-    mermaid.initialize({ 
+    mermaid.initialize({
         startOnLoad: false,
         theme: 'default',
         securityLevel: 'loose'
@@ -86,15 +86,15 @@
     async function uploadImage(file) {
         const formData = new FormData();
         formData.append('file', file);
-        
+
         try {
             const response = await fetch('/api/upload-image', {
                 method: 'POST',
                 body: formData
             });
-            
+
             if (!response.ok) throw new Error('Upload failed');
-            
+
             const result = await response.json();
             return result.url;
         } catch (error) {
@@ -107,44 +107,44 @@
     // Handle drag and drop for images
     function setupDragAndDrop() {
         const editorElement = document.querySelector('.CodeMirror');
-        
+
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
             editorElement.addEventListener(eventName, preventDefaults, false);
         });
-        
+
         function preventDefaults(e) {
             e.preventDefault();
             e.stopPropagation();
         }
-        
+
         ['dragenter', 'dragover'].forEach(eventName => {
             editorElement.addEventListener(eventName, () => {
                 editorElement.classList.add('drag-over');
             }, false);
         });
-        
+
         ['dragleave', 'drop'].forEach(eventName => {
             editorElement.addEventListener(eventName, () => {
                 editorElement.classList.remove('drag-over');
             }, false);
         });
-        
+
         editorElement.addEventListener('drop', async (e) => {
             const files = e.dataTransfer.files;
-            
+
             if (files.length === 0) return;
-            
+
-            const imageFiles = Array.from(files).filter(file => 
+            const imageFiles = Array.from(files).filter(file =>
                 file.type.startsWith('image/')
             );
-            
+
             if (imageFiles.length === 0) {
                 showNotification('Please drop image files only', 'warning');
                 return;
             }
-            
+
             showNotification(`Uploading ${imageFiles.length} image(s)...`, 'info');
-            
+
             for (const file of imageFiles) {
                 const url = await uploadImage(file);
                 if (url) {
@@ -156,11 +156,11 @@
                 }
             }
         }, false);
-        
+
         editorElement.addEventListener('paste', async (e) => {
             const items = e.clipboardData?.items;
             if (!items) return;
-            
+
             for (const item of items) {
                 if (item.type.startsWith('image/')) {
                     e.preventDefault();
@@ -189,15 +189,15 @@
             lineWrapping: true,
             autofocus: true,
             extraKeys: {
-                'Ctrl-S': function() { saveFile(); },
+                'Ctrl-S': function () { saveFile(); },
-                'Cmd-S': function() { saveFile(); }
+                'Cmd-S': function () { saveFile(); }
             }
         });
 
         editor.on('change', debounce(updatePreview, 300));
-        
+
         setTimeout(setupDragAndDrop, 100);
-        
+
         setupScrollSync();
     }
 
@@ -217,13 +217,13 @@
     // Setup synchronized scrolling
     function setupScrollSync() {
         const previewDiv = document.getElementById('preview');
-        
+
         editor.on('scroll', () => {
             if (!isScrollingSynced) return;
-            
+
             const scrollInfo = editor.getScrollInfo();
             const scrollPercentage = scrollInfo.top / (scrollInfo.height - scrollInfo.clientHeight);
-            
+
             const previewScrollHeight = previewDiv.scrollHeight - previewDiv.clientHeight;
             previewDiv.scrollTop = previewScrollHeight * scrollPercentage;
         });
@@ -233,7 +233,7 @@
     async function updatePreview() {
         const markdown = editor.getValue();
         const previewDiv = document.getElementById('preview');
-        
+
         if (!markdown.trim()) {
             previewDiv.innerHTML = `
                 <div class="text-muted text-center mt-5">
@@ -243,17 +243,17 @@
             `;
             return;
         }
-        
+
         try {
             let html = marked.parse(markdown);
-            
+
             html = html.replace(
                 /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,
                 '<div class="mermaid">$1</div>'
             );
-            
+
             previewDiv.innerHTML = html;
-            
+
             const codeBlocks = previewDiv.querySelectorAll('pre code');
             codeBlocks.forEach(block => {
                 const languageClass = Array.from(block.classList).find(cls => cls.startsWith('language-'));
@@ -261,7 +261,7 @@
                     Prism.highlightElement(block);
                 }
             });
-            
+
             const mermaidElements = previewDiv.querySelectorAll('.mermaid');
             if (mermaidElements.length > 0) {
                 try {
@@ -291,7 +291,7 @@
         try {
             const response = await fetch('/api/tree');
             if (!response.ok) throw new Error('Failed to load file tree');
-            
+
             fileTree = await response.json();
             renderFileTree();
         } catch (error) {
@@ -303,12 +303,12 @@
     function renderFileTree() {
         const container = document.getElementById('fileTree');
         container.innerHTML = '';
-        
+
         if (fileTree.length === 0) {
             container.innerHTML = '<div class="text-muted text-center p-3">No files yet</div>';
             return;
         }
-        
+
         fileTree.forEach(node => {
             container.appendChild(createTreeNode(node));
         });
@@ -317,13 +317,13 @@
     function createTreeNode(node, level = 0) {
         const nodeDiv = document.createElement('div');
         nodeDiv.className = 'tree-node-wrapper';
-        
+
         const nodeContent = document.createElement('div');
         nodeContent.className = 'tree-node';
         nodeContent.dataset.path = node.path;
         nodeContent.dataset.type = node.type;
         nodeContent.dataset.name = node.name;
-        
+
         // Make draggable
         nodeContent.draggable = true;
         nodeContent.addEventListener('dragstart', handleDragStart);
@@ -331,14 +331,13 @@
         nodeContent.addEventListener('dragover', handleDragOver);
         nodeContent.addEventListener('dragleave', handleDragLeave);
         nodeContent.addEventListener('drop', handleDrop);
-        
+
         const contentWrapper = document.createElement('div');
         contentWrapper.className = 'tree-node-content';
-        
+
         if (node.type === 'directory') {
             const toggle = document.createElement('span');
             toggle.className = 'tree-node-toggle';
-            toggle.innerHTML = '▶';
             toggle.addEventListener('click', (e) => {
                 e.stopPropagation();
                 toggleNode(nodeDiv);
@@ -349,56 +348,56 @@
             spacer.style.width = '16px';
             contentWrapper.appendChild(spacer);
         }
-        
+
         const icon = document.createElement('i');
         icon.className = node.type === 'directory' ? 'bi bi-folder tree-node-icon' : 'bi bi-file-earmark-text tree-node-icon';
         contentWrapper.appendChild(icon);
-        
+
         const name = document.createElement('span');
         name.className = 'tree-node-name';
         name.textContent = node.name;
         contentWrapper.appendChild(name);
-        
+
         if (node.type === 'file' && node.size) {
             const size = document.createElement('span');
             size.className = 'file-size-badge';
             size.textContent = formatFileSize(node.size);
             contentWrapper.appendChild(size);
         }
-        
+
         nodeContent.appendChild(contentWrapper);
-        
+
         nodeContent.addEventListener('click', (e) => {
             if (node.type === 'file') {
                 loadFile(node.path);
             }
         });
-        
+
         nodeContent.addEventListener('contextmenu', (e) => {
             e.preventDefault();
             showContextMenu(e, node);
         });
-        
+
         nodeDiv.appendChild(nodeContent);
-        
+
         if (node.children && node.children.length > 0) {
             const childrenDiv = document.createElement('div');
             childrenDiv.className = 'tree-children collapsed';
-            
+
             node.children.forEach(child => {
                 childrenDiv.appendChild(createTreeNode(child, level + 1));
             });
-            
+
             nodeDiv.appendChild(childrenDiv);
         }
-        
+
         return nodeDiv;
     }
 
     function toggleNode(nodeWrapper) {
         const toggle = nodeWrapper.querySelector('.tree-node-toggle');
         const children = nodeWrapper.querySelector('.tree-children');
-        
+
         if (children) {
             children.classList.toggle('collapsed');
             toggle.classList.toggle('expanded');
@@ -437,10 +436,10 @@
 
     function handleDragOver(e) {
         if (!draggedNode) return;
-        
+
         e.preventDefault();
         e.dataTransfer.dropEffect = 'move';
-        
+
         const targetType = e.currentTarget.dataset.type;
         if (targetType === 'directory') {
             e.currentTarget.classList.add('drag-over');
@@ -454,18 +453,18 @@
     async function handleDrop(e) {
         e.preventDefault();
         e.currentTarget.classList.remove('drag-over');
-        
+
         if (!draggedNode) return;
-        
+
         const targetPath = e.currentTarget.dataset.path;
         const targetType = e.currentTarget.dataset.type;
-        
+
         if (targetType !== 'directory') return;
         if (draggedNode.path === targetPath) return;
-        
+
         const sourcePath = draggedNode.path;
         const destPath = targetPath + '/' + draggedNode.name;
-        
+
         try {
             const response = await fetch('/api/file/move', {
                 method: 'POST',
@@ -475,16 +474,16 @@
                     destination: destPath
                 })
             });
-            
+
             if (!response.ok) throw new Error('Move failed');
-            
+
             showNotification(`Moved ${draggedNode.name}`, 'success');
             loadFileTree();
         } catch (error) {
             console.error('Error moving file:', error);
             showNotification('Error moving file', 'danger');
         }
-        
+
         draggedNode = null;
     }
 
@@ -496,18 +495,18 @@
         contextMenuTarget = node;
         const menu = document.getElementById('contextMenu');
         const pasteItem = document.getElementById('pasteMenuItem');
-        
+
         // Show paste option only if clipboard has something and target is a directory
         if (clipboard && node.type === 'directory') {
             pasteItem.style.display = 'flex';
         } else {
             pasteItem.style.display = 'none';
         }
-        
+
         menu.style.display = 'block';
         menu.style.left = e.pageX + 'px';
         menu.style.top = e.pageY + 'px';
-        
+
         document.addEventListener('click', hideContextMenu);
     }
 
@@ -525,20 +524,20 @@
         try {
             const response = await fetch(`/api/file?path=${encodeURIComponent(path)}`);
             if (!response.ok) throw new Error('Failed to load file');
-            
+
             const data = await response.json();
             currentFile = data.filename;
             currentFilePath = path;
-            
+
             document.getElementById('filenameInput').value = path;
             editor.setValue(data.content);
             updatePreview();
-            
+
             document.querySelectorAll('.tree-node').forEach(node => {
                 node.classList.remove('active');
             });
             document.querySelector(`[data-path="${path}"]`)?.classList.add('active');
-            
+
             showNotification(`Loaded ${data.filename}`, 'info');
         } catch (error) {
             console.error('Error loading file:', error);
@@ -548,27 +547,27 @@
 
     async function saveFile() {
         const path = document.getElementById('filenameInput').value.trim();
-        
+
         if (!path) {
             showNotification('Please enter a filename', 'warning');
             return;
         }
-        
+
         const content = editor.getValue();
-        
+
         try {
             const response = await fetch('/api/file', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ path, content })
             });
-            
+
             if (!response.ok) throw new Error('Failed to save file');
-            
+
             const result = await response.json();
             currentFile = path.split('/').pop();
             currentFilePath = result.path;
-            
+
             showNotification(`Saved ${currentFile}`, 'success');
             loadFileTree();
         } catch (error) {
@@ -582,26 +581,26 @@
             showNotification('No file selected', 'warning');
             return;
         }
-        
+
         if (!confirm(`Are you sure you want to delete ${currentFile}?`)) {
             return;
         }
-        
+
         try {
             const response = await fetch(`/api/file?path=${encodeURIComponent(currentFilePath)}`, {
                 method: 'DELETE'
             });
-            
+
             if (!response.ok) throw new Error('Failed to delete file');
-            
+
             showNotification(`Deleted ${currentFile}`, 'success');
-            
+
             currentFile = null;
             currentFilePath = null;
             document.getElementById('filenameInput').value = '';
             editor.setValue('');
             updatePreview();
-            
+
             loadFileTree();
         } catch (error) {
             console.error('Error deleting file:', error);
@@ -617,27 +616,27 @@
         document.getElementById('filenameInput').focus();
         editor.setValue('');
         updatePreview();
-        
+
         document.querySelectorAll('.tree-node').forEach(node => {
             node.classList.remove('active');
         });
-        
+
         showNotification('Enter filename and start typing', 'info');
     }
 
     async function createFolder() {
         const folderName = prompt('Enter folder name:');
         if (!folderName) return;
-        
+
         try {
             const response = await fetch('/api/directory', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ path: folderName })
             });
-            
+
             if (!response.ok) throw new Error('Failed to create folder');
-            
+
             showNotification(`Created folder ${folderName}`, 'success');
             loadFileTree();
         } catch (error) {
@@ -652,32 +651,32 @@
 
     async function handleContextMenuAction(action) {
         if (!contextMenuTarget) return;
-        
+
         switch (action) {
             case 'open':
                 if (contextMenuTarget.type === 'file') {
                     loadFile(contextMenuTarget.path);
                 }
                 break;
-                
+
             case 'rename':
                 await renameItem();
                 break;
-                
+
             case 'copy':
                 clipboard = { ...contextMenuTarget, operation: 'copy' };
                 showNotification(`Copied ${contextMenuTarget.name}`, 'info');
                 break;
-                
+
             case 'move':
                 clipboard = { ...contextMenuTarget, operation: 'move' };
                 showNotification(`Cut ${contextMenuTarget.name}`, 'info');
                 break;
-                
+
             case 'paste':
                 await pasteItem();
                 break;
-                
+
             case 'delete':
                 await deleteItem();
                 break;
@@ -687,10 +686,10 @@
     async function renameItem() {
         const newName = prompt(`Rename ${contextMenuTarget.name}:`, contextMenuTarget.name);
         if (!newName || newName === contextMenuTarget.name) return;
-        
+
         const oldPath = contextMenuTarget.path;
         const newPath = oldPath.substring(0, oldPath.lastIndexOf('/') + 1) + newName;
-        
+
         try {
             const endpoint = contextMenuTarget.type === 'directory' ? '/api/directory/rename' : '/api/file/rename';
             const response = await fetch(endpoint, {
@@ -701,9 +700,9 @@
                     new_path: newPath
                 })
             });
-            
+
             if (!response.ok) throw new Error('Rename failed');
-            
+
             showNotification(`Renamed to ${newName}`, 'success');
             loadFileTree();
         } catch (error) {
@@ -714,12 +713,12 @@
 
     async function pasteItem() {
         if (!clipboard) return;
-        
+
         const destDir = contextMenuTarget.path;
         const sourcePath = clipboard.path;
         const fileName = clipboard.name;
         const destPath = destDir + '/' + fileName;
-        
+
         try {
             if (clipboard.operation === 'copy') {
                 // Copy operation
@@ -731,7 +730,7 @@
                         destination: destPath
                     })
                 });
-                
+
                 if (!response.ok) throw new Error('Copy failed');
                 showNotification(`Copied ${fileName} to ${contextMenuTarget.name}`, 'success');
             } else if (clipboard.operation === 'move') {
@@ -744,12 +743,12 @@
                         destination: destPath
                     })
                 });
-                
+
                 if (!response.ok) throw new Error('Move failed');
                 showNotification(`Moved ${fileName} to ${contextMenuTarget.name}`, 'success');
                 clipboard = null; // Clear clipboard after move
             }
-            
+
             loadFileTree();
         } catch (error) {
             console.error('Error pasting:', error);
@@ -761,7 +760,7 @@
         if (!confirm(`Are you sure you want to delete ${contextMenuTarget.name}?`)) {
             return;
         }
-        
+
         try {
             let response;
             if (contextMenuTarget.type === 'directory') {
@@ -773,9 +772,9 @@
                     method: 'DELETE'
                 });
             }
-            
+
             if (!response.ok) throw new Error('Delete failed');
-            
+
             showNotification(`Deleted ${contextMenuTarget.name}`, 'success');
             loadFileTree();
         } catch (error) {
@@ -793,7 +792,7 @@
         if (!toastContainer) {
             toastContainer = createToastContainer();
         }
-        
+
         const toast = document.createElement('div');
         toast.className = `toast align-items-center text-white bg-${type} border-0`;
         toast.setAttribute('role', 'alert');
@@ -803,12 +802,12 @@
                 <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
             </div>
         `;
-        
+
         toastContainer.appendChild(toast);
-        
+
         const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
         bsToast.show();
-        
+
         toast.addEventListener('hidden.bs.toast', () => {
             toast.remove();
         });
@@ -831,13 +830,13 @@
         initDarkMode();
         initEditor();
         loadFileTree();
-        
+
         document.getElementById('saveBtn').addEventListener('click', saveFile);
         document.getElementById('deleteBtn').addEventListener('click', deleteFile);
         document.getElementById('newFileBtn').addEventListener('click', newFile);
         document.getElementById('newFolderBtn').addEventListener('click', createFolder);
         document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
-        
+
         // Context menu actions
         document.querySelectorAll('.context-menu-item').forEach(item => {
             item.addEventListener('click', () => {
@@ -846,14 +845,14 @@
                 hideContextMenu();
             });
         });
-        
+
         document.addEventListener('keydown', (e) => {
             if ((e.ctrlKey || e.metaKey) && e.key === 's') {
                 e.preventDefault();
                 saveFile();
             }
         });
-        
+
         console.log('Markdown Editor with File Tree initialized');
     }
 

static/css/components.css

@@ -2,10 +2,21 @@
 .preview-pane {
     font-size: 16px;
     line-height: 1.6;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
 }
 
-.preview-pane h1, .preview-pane h2, .preview-pane h3,
+#preview {
-.preview-pane h4, .preview-pane h5, .preview-pane h6 {
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+}
+
+.preview-pane h1,
+.preview-pane h2,
+.preview-pane h3,
+.preview-pane h4,
+.preview-pane h5,
+.preview-pane h6 {
     margin-top: 24px;
     margin-bottom: 16px;
     font-weight: 600;
@@ -137,6 +148,7 @@ body.dark-mode .context-menu {
         transform: translateX(400px);
         opacity: 0;
     }
+
     to {
         transform: translateX(0);
         opacity: 1;
@@ -152,6 +164,7 @@ body.dark-mode .context-menu {
         transform: translateX(0);
         opacity: 1;
     }
+
     to {
         transform: translateX(400px);
         opacity: 0;
@@ -205,4 +218,62 @@ body.dark-mode .modal-footer {
     color: var(--text-primary);
     border-color: var(--link-color);
     box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+}
+
+/* Directory Preview Styles */
+.directory-preview {
+    padding: 20px;
+}
+
+.directory-preview h2 {
+    margin-bottom: 20px;
+    /* color: var(--text-primary); */
+}
+
+.directory-files {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 16px;
+    margin-top: 20px;
+}
+
+.file-card {
+    background-color: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.file-card:hover {
+    background-color: var(--bg-secondary);
+    border-color: var(--link-color);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.file-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.file-card-header i {
+    color: var(--link-color);
+    font-size: 18px;
+}
+
+.file-card-name {
+    font-weight: 500;
+    color: var(--text-primary);
+    word-break: break-word;
+}
+
+.file-card-description {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.4;
+    margin-top: 8px;
 }

static/css/editor.css

@@ -6,6 +6,8 @@
     display: flex;
     gap: 10px;
     align-items: center;
+    flex-shrink: 0;
+    /* Prevent header from shrinking */
 }
 
 .editor-header input {
@@ -19,18 +21,42 @@
 
 .editor-container {
     flex: 1;
+    /* Take remaining space */
     overflow: hidden;
+    /* Prevent container overflow, CodeMirror handles its own scrolling */
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    /* Important: allows flex child to shrink below content size */
+    position: relative;
+}
+
+#editor {
+    flex: 1;
+    /* Take all available space */
+    min-height: 0;
+    /* Allow shrinking */
+    overflow: hidden;
+    /* CodeMirror will handle scrolling */
 }
 
 /* CodeMirror customization */
 .CodeMirror {
-    height: 100%;
+    height: 100% !important;
+    /* Force full height */
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
     font-size: 14px;
     background-color: var(--bg-primary);
     color: var(--text-primary);
 }
 
+.CodeMirror-scroll {
+    overflow-y: auto !important;
+    /* Ensure vertical scrolling is enabled */
+    overflow-x: auto !important;
+    /* Ensure horizontal scrolling is enabled */
+}
+
 body.dark-mode .CodeMirror {
     background-color: #1c2128;
     color: #e6edf3;
@@ -71,5 +97,4 @@ body.dark-mode .CodeMirror-gutters {
     color: var(--info-color);
     pointer-events: none;
     z-index: 1000;
-}
+}
-

static/css/file-tree.css

@@ -20,8 +20,9 @@
     color: var(--text-primary);
     transition: all 0.15s ease;
     white-space: nowrap;
-    overflow: hidden;
+    overflow: visible;
     text-overflow: ellipsis;
+    min-height: 28px;
 }
 
 .tree-node:hover {
@@ -29,14 +30,16 @@
 }
 
 .tree-node.active {
-    background-color: var(--link-color);
+    color: var(--link-color);
-    color: white;
     font-weight: 500;
 }
 
 .tree-node.active:hover {
-    background-color: var(--link-color);
+    filter: brightness(1.2);
-    filter: brightness(1.1);
+}
+
+.tree-node.active .tree-node-icon {
+    color: var(--link-color);
 }
 
 /* Toggle arrow */
@@ -46,16 +49,25 @@
     justify-content: center;
     width: 16px;
     height: 16px;
-    font-size: 10px;
+    min-width: 16px;
+    min-height: 16px;
     color: var(--text-secondary);
     flex-shrink: 0;
     transition: transform 0.2s ease;
+    position: relative;
+    z-index: 1;
+    overflow: visible;
+    cursor: pointer;
 }
 
 .tree-node-toggle.expanded {
     transform: rotate(90deg);
 }
 
+.tree-node-toggle:hover {
+    color: var(--link-color);
+}
+
 /* Icon styling */
 .tree-node-icon {
     width: 16px;
@@ -67,10 +79,6 @@
     color: var(--text-secondary);
 }
 
-.tree-node.active .tree-node-icon {
-    color: white;
-}
-
 /* Content wrapper */
 .tree-node-content {
     display: flex;
@@ -112,13 +120,54 @@
 }
 
 /* Drag and drop */
+/* Default cursor is pointer, not grab (only show grab after long-press) */
+.tree-node {
+    cursor: pointer;
+}
+
+/* Show grab cursor only when drag is ready (after long-press) */
+.tree-node.drag-ready {
+    cursor: grab !important;
+}
+
+.tree-node.drag-ready:active {
+    cursor: grabbing !important;
+}
+
 .tree-node.dragging {
-    opacity: 0.5;
+    opacity: 0.4;
+    background-color: var(--bg-tertiary);
+    cursor: grabbing !important;
 }
 
 .tree-node.drag-over {
-    background-color: rgba(13, 110, 253, 0.2);
+    background-color: rgba(13, 110, 253, 0.15) !important;
-    border: 1px dashed var(--link-color);
+    border: 2px dashed var(--link-color) !important;
+    box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
+}
+
+/* Root-level drop target highlighting */
+.file-tree.drag-over-root {
+    background-color: rgba(13, 110, 253, 0.08);
+    border: 2px dashed var(--link-color);
+    border-radius: 6px;
+    box-shadow: inset 0 0 12px rgba(13, 110, 253, 0.2);
+    margin: 4px;
+    padding: 4px;
+}
+
+/* Only show drag cursor on directories when dragging */
+body.dragging-active .tree-node[data-isdir="true"] {
+    cursor: copy;
+}
+
+body.dragging-active .tree-node[data-isdir="false"] {
+    cursor: no-drop;
+}
+
+/* Show move cursor when hovering over root-level empty space */
+body.dragging-active .file-tree.drag-over-root {
+    cursor: move;
 }
 
 /* Collection selector - Bootstrap styled */
@@ -156,13 +205,34 @@ body.dark-mode .tree-node:hover {
 }
 
 body.dark-mode .tree-node.active {
-    background-color: var(--link-color);
+    color: var(--link-color);
+}
+
+body.dark-mode .tree-node.active .tree-node-icon {
+    color: var(--link-color);
+}
+
+body.dark-mode .tree-node.active .tree-node-icon .tree-node-toggle {
+    color: var(--link-color);
 }
 
 body.dark-mode .tree-children {
     border-left-color: var(--border-color);
 }
 
+/* Empty directory message */
+.tree-empty-message {
+    padding: 8px 12px;
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-style: italic;
+    user-select: none;
+}
+
+body.dark-mode .tree-empty-message {
+    color: var(--text-secondary);
+}
+
 /* Scrollbar in sidebar */
 .sidebar::-webkit-scrollbar-thumb {
     background-color: var(--border-color);

static/css/layout.css

@@ -1,14 +1,22 @@
 /* Base layout styles */
-html, body {
+html,
-    height: 100%;
+body {
+    height: 100vh;
     margin: 0;
     padding: 0;
+    overflow: hidden;
+    /* Prevent page-level scrolling */
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
     background-color: var(--bg-primary);
     color: var(--text-primary);
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+body {
+    display: flex;
+    flex-direction: column;
+}
+
 /* Column Resizer */
 .column-resizer {
     width: 1px;
@@ -17,14 +25,21 @@ html, body {
     transition: background-color 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
     user-select: none;
     flex-shrink: 0;
-    padding: 0 3px;  /* Add invisible padding for easier grab */
+    padding: 0 3px;
-    margin: 0 -3px;  /* Compensate for padding */
+    /* Add invisible padding for easier grab */
+    margin: 0 -3px;
+    /* Compensate for padding */
+    height: 100%;
+    /* Take full height of parent */
+    align-self: stretch;
+    /* Ensure it stretches to full height */
 }
 
 .column-resizer:hover {
     background-color: var(--link-color);
     width: 1px;
-    box-shadow: 0 0 6px rgba(13, 110, 253, 0.3);  /* Visual feedback instead of width change */
+    box-shadow: 0 0 6px rgba(13, 110, 253, 0.3);
+    /* Visual feedback instead of width change */
 }
 
 .column-resizer.dragging {
@@ -36,12 +51,59 @@ html, body {
     background-color: var(--link-color);
 }
 
-/* Adjust container for flex layout */
+/* Navbar */
-.container-fluid {
+.navbar {
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    transition: background-color 0.3s ease;
+    flex-shrink: 0;
+    /* Prevent navbar from shrinking */
+    padding: 0.5rem 1rem;
+}
+
+.navbar .container-fluid {
     display: flex;
     flex-direction: row;
-    height: calc(100% - 56px);
+    align-items: center;
+    justify-content: space-between;
     padding: 0;
+    overflow: visible;
+    /* Override the hidden overflow for navbar */
+}
+
+.navbar-brand {
+    color: var(--text-primary) !important;
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin: 0;
+    flex-shrink: 0;
+}
+
+.navbar-brand i {
+    font-size: 1.2rem;
+    margin-right: 0.5rem;
+}
+
+.navbar-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.navbar-right {
+    flex-shrink: 0;
+}
+
+/* Adjust container for flex layout */
+.container-fluid {
+    flex: 1;
+    /* Take remaining space after navbar */
+    padding: 0;
+    overflow: hidden;
+    /* Prevent container scrolling */
+    display: flex;
+    flex-direction: column;
 }
 
 .row {
@@ -50,6 +112,8 @@ html, body {
     flex-direction: row;
     margin: 0;
     height: 100%;
+    overflow: hidden;
+    /* Prevent row scrolling */
 }
 
 #sidebarPane {
@@ -57,6 +121,9 @@ html, body {
     min-width: 150px;
     max-width: 40%;
     padding: 0;
+    height: 100%;
+    overflow: hidden;
+    /* Prevent pane scrolling */
 }
 
 #editorPane {
@@ -64,25 +131,23 @@ html, body {
     min-width: 250px;
     max-width: 70%;
     padding: 0;
-}
+    display: flex;
-
+    flex-direction: column;
-#previewPane {
+    height: 100%;
-    flex: 1 1 40%;
+    overflow: hidden;
-    min-width: 250px;
+    /* Prevent pane scrolling */
-    max-width: 70%;
-    padding: 0;
 }
 
 /* Sidebar - improved */
 .sidebar {
     background-color: var(--bg-secondary);
     border-right: 1px solid var(--border-color);
-    overflow-y: auto;
-    overflow-x: hidden;
     height: 100%;
     transition: background-color 0.3s ease;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    /* Prevent sidebar container scrolling */
 }
 
 .sidebar h6 {
@@ -92,25 +157,27 @@ html, body {
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    flex-shrink: 0;
+    /* Prevent header from shrinking */
+}
+
+/* Collection selector - fixed height */
+.collection-selector {
+    flex-shrink: 0;
+    /* Prevent selector from shrinking */
+    padding: 12px 10px;
+    background-color: var(--bg-secondary);
 }
 
 #fileTree {
     flex: 1;
+    /* Take remaining space */
     overflow-y: auto;
+    /* Enable vertical scrolling */
     overflow-x: hidden;
-    padding: 4px 0;
+    padding: 4px 10px;
-}
+    min-height: 0;
-
+    /* Important: allows flex child to shrink below content size */
-/* Navbar */
-.navbar {
-    background-color: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-color);
-    transition: background-color 0.3s ease;
-}
-
-.navbar-brand {
-    color: var(--text-primary) !important;
-    font-weight: 600;
 }
 
 /* Scrollbar styling */
@@ -135,28 +202,78 @@ html, body {
 
 /* Preview Pane Styling */
 #previewPane {
-    flex: 1 1 40%;
     min-width: 250px;
     max-width: 70%;
     padding: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
     background-color: var(--bg-primary);
     border-left: 1px solid var(--border-color);
+    flex: 1;
+    height: 100%;
+    overflow-y: auto;
+    /* Enable vertical scrolling for preview pane */
+    overflow-x: hidden;
 }
 
 #preview {
     padding: 20px;
-    min-height: 100%;
     overflow-wrap: break-word;
     word-wrap: break-word;
+    color: var(--text-primary);
+    min-height: 100%;
+    /* Ensure content fills at least the full height */
 }
 
-#preview > p:first-child {
+#preview>p:first-child {
     margin-top: 0;
 }
 
-#preview > h1:first-child,
+#preview>h1:first-child,
-#preview > h2:first-child {
+#preview>h2:first-child {
     margin-top: 0;
+}
+
+/* View Mode Styles */
+body.view-mode #editorPane {
+    display: none;
+}
+
+body.view-mode #resizer1 {
+    display: none;
+}
+
+body.view-mode #resizer2 {
+    display: none;
+}
+
+body.view-mode #previewPane {
+    max-width: 100%;
+    min-width: auto;
+}
+
+body.view-mode #sidebarPane {
+    display: flex;
+    flex: 0 0 20%;
+    height: 100%;
+    /* Keep sidebar at 20% width in view mode */
+}
+
+body.edit-mode #editorPane {
+    display: flex;
+}
+
+body.edit-mode #resizer1 {
+    display: block;
+}
+
+body.edit-mode #resizer2 {
+    display: block;
+}
+
+body.edit-mode #previewPane {
+    max-width: 70%;
+}
+
+body.edit-mode #sidebarPane {
+    display: flex;
+    height: 100%;
 }

static/js/app.js

@@ -12,100 +12,430 @@ let collectionSelector;
 let clipboard = null;
 let currentFilePath = null;
 
-// Simple event bus
+// Event bus is now loaded from event-bus.js module
-const eventBus = {
+// No need to define it here - it's available as window.eventBus
-    listeners: {},
+
-    on(event, callback) {
+/**
-        if (!this.listeners[event]) {
+ * Auto-load page in view mode
-            this.listeners[event] = [];
+ * Tries to load the last viewed page, falls back to first file if none saved
+ */
+async function autoLoadPageInViewMode() {
+    if (!editor || !fileTree) return;
+
+    try {
+        // Try to get last viewed page
+        let pageToLoad = editor.getLastViewedPage();
+
+        // If no last viewed page, get the first markdown file
+        if (!pageToLoad) {
+            pageToLoad = fileTree.getFirstMarkdownFile();
         }
-        this.listeners[event].push(callback);
+
-    },
+        // If we found a page to load, load it
-    dispatch(event, data) {
+        if (pageToLoad) {
-        if (this.listeners[event]) {
+            await editor.loadFile(pageToLoad);
-            this.listeners[event].forEach(callback => callback(data));
+            // Highlight the file in the tree and expand parent directories
+            fileTree.selectAndExpandPath(pageToLoad);
+        } else {
+            // No files found, show empty state message
+            editor.previewElement.innerHTML = `
+                <div class="text-muted text-center mt-5">
+                    <p>No content available</p>
+                </div>
+            `;
         }
+    } catch (error) {
+        console.error('Failed to auto-load page in view mode:', error);
+        editor.previewElement.innerHTML = `
+            <div class="alert alert-danger">
+                <p>Failed to load content</p>
+            </div>
+        `;
     }
-};
+}
-window.eventBus = eventBus;
+
+/**
+ * Show directory preview with list of files
+ * @param {string} dirPath - The directory path
+ */
+async function showDirectoryPreview(dirPath) {
+    if (!editor || !fileTree || !webdavClient) return;
+
+    try {
+        const dirName = dirPath.split('/').pop() || dirPath;
+        const files = fileTree.getDirectoryFiles(dirPath);
+
+        // Start building the preview HTML
+        let html = `<div class="directory-preview">`;
+        html += `<h2>${dirName}</h2>`;
+
+        if (files.length === 0) {
+            html += `<p>This directory is empty</p>`;
+        } else {
+            html += `<div class="directory-files">`;
+
+            // Create cards for each file
+            for (const file of files) {
+                const fileName = file.name;
+                let fileDescription = '';
+
+                // Try to get file description from markdown files
+                if (file.name.endsWith('.md')) {
+                    try {
+                        const content = await webdavClient.get(file.path);
+                        // Extract first heading or first line as description
+                        const lines = content.split('\n');
+                        for (const line of lines) {
+                            if (line.trim().startsWith('#')) {
+                                fileDescription = line.replace(/^#+\s*/, '').trim();
+                                break;
+                            } else if (line.trim() && !line.startsWith('---')) {
+                                fileDescription = line.trim().substring(0, 100);
+                                break;
+                            }
+                        }
+                    } catch (error) {
+                        console.error('Failed to read file description:', error);
+                    }
+                }
+
+                html += `
+                    <div class="file-card" data-path="${file.path}">
+                        <div class="file-card-header">
+                            <i class="bi bi-file-earmark-text"></i>
+                            <span class="file-card-name">${fileName}</span>
+                        </div>
+                        ${fileDescription ? `<div class="file-card-description">${fileDescription}</div>` : ''}
+                    </div>
+                `;
+            }
+
+            html += `</div>`;
+        }
+
+        html += `</div>`;
+
+        // Set the preview content
+        editor.previewElement.innerHTML = html;
+
+        // Add click handlers to file cards
+        editor.previewElement.querySelectorAll('.file-card').forEach(card => {
+            card.addEventListener('click', async () => {
+                const filePath = card.dataset.path;
+                await editor.loadFile(filePath);
+                fileTree.selectAndExpandPath(filePath);
+            });
+        });
+    } catch (error) {
+        console.error('Failed to show directory preview:', error);
+        editor.previewElement.innerHTML = `
+            <div class="alert alert-danger">
+                <p>Failed to load directory preview</p>
+            </div>
+        `;
+    }
+}
+
+/**
+ * Parse URL to extract collection and file path
+ * URL format: /<collection>/<file_path> or /<collection>/<dir>/<file>
+ * @returns {Object} {collection, filePath} or {collection, null} if only collection
+ */
+function parseURLPath() {
+    const pathname = window.location.pathname;
+    const parts = pathname.split('/').filter(p => p); // Remove empty parts
+
+    if (parts.length === 0) {
+        return { collection: null, filePath: null };
+    }
+
+    const collection = parts[0];
+    const filePath = parts.length > 1 ? parts.slice(1).join('/') : null;
+
+    return { collection, filePath };
+}
+
+/**
+ * Update URL based on current collection and file
+ * @param {string} collection - The collection name
+ * @param {string} filePath - The file path (optional)
+ * @param {boolean} isEditMode - Whether in edit mode
+ */
+function updateURL(collection, filePath, isEditMode) {
+    let url = `/${collection}`;
+    if (filePath) {
+        url += `/${filePath}`;
+    }
+    if (isEditMode) {
+        url += '?edit=true';
+    }
+
+    // Use pushState to update URL without reloading
+    window.history.pushState({ collection, filePath }, '', url);
+}
+
+/**
+ * Load file from URL path
+ * Assumes the collection is already set and file tree is loaded
+ * @param {string} collection - The collection name (for validation)
+ * @param {string} filePath - The file path
+ */
+async function loadFileFromURL(collection, filePath) {
+    console.log('[loadFileFromURL] Called with:', { collection, filePath });
+
+    if (!fileTree || !editor || !collectionSelector) {
+        console.error('[loadFileFromURL] Missing dependencies:', { fileTree: !!fileTree, editor: !!editor, collectionSelector: !!collectionSelector });
+        return;
+    }
+
+    try {
+        // Verify we're on the right collection
+        const currentCollection = collectionSelector.getCurrentCollection();
+        if (currentCollection !== collection) {
+            console.error(`[loadFileFromURL] Collection mismatch: expected ${collection}, got ${currentCollection}`);
+            return;
+        }
+
+        // Load the file or directory
+        if (filePath) {
+            // Check if the path is a directory or a file
+            const node = fileTree.findNode(filePath);
+            console.log('[loadFileFromURL] Found node:', node);
+
+            if (node && node.isDirectory) {
+                // It's a directory, show directory preview
+                console.log('[loadFileFromURL] Loading directory preview');
+                await showDirectoryPreview(filePath);
+                fileTree.selectAndExpandPath(filePath);
+            } else if (node) {
+                // It's a file, load it
+                console.log('[loadFileFromURL] Loading file');
+                await editor.loadFile(filePath);
+                fileTree.selectAndExpandPath(filePath);
+            } else {
+                console.error(`[loadFileFromURL] Path not found in file tree: ${filePath}`);
+            }
+        }
+    } catch (error) {
+        console.error('[loadFileFromURL] Failed to load file from URL:', error);
+    }
+}
+
+/**
+ * Handle browser back/forward navigation
+ */
+function setupPopStateListener() {
+    window.addEventListener('popstate', async (event) => {
+        const { collection, filePath } = parseURLPath();
+        if (collection) {
+            // Ensure the collection is set
+            const currentCollection = collectionSelector.getCurrentCollection();
+            if (currentCollection !== collection) {
+                await collectionSelector.setCollection(collection);
+                await fileTree.load();
+            }
+
+            // Load the file/directory
+            await loadFileFromURL(collection, filePath);
+        }
+    });
+}
 
 // Initialize application
 document.addEventListener('DOMContentLoaded', async () => {
+    // Determine view mode from URL parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    const isEditMode = urlParams.get('edit') === 'true';
+
+    // Set view mode class on body
+    if (isEditMode) {
+        document.body.classList.add('edit-mode');
+        document.body.classList.remove('view-mode');
+    } else {
+        document.body.classList.add('view-mode');
+        document.body.classList.remove('edit-mode');
+    }
+
     // Initialize WebDAV client
     webdavClient = new WebDAVClient('/fs/');
-    
+
     // Initialize dark mode
     darkMode = new DarkMode();
     document.getElementById('darkModeBtn').addEventListener('click', () => {
         darkMode.toggle();
     });
-    
+
-    // Initialize file tree
+    // Initialize collection selector (always needed)
-    fileTree = new FileTree('fileTree', webdavClient);
-    fileTree.onFileSelect = async (item) => {
-        await editor.loadFile(item.path);
-    };
-    
-    // Initialize collection selector
     collectionSelector = new CollectionSelector('collectionSelect', webdavClient);
-    collectionSelector.onChange = async (collection) => {
-        await fileTree.load();
-    };
     await collectionSelector.load();
-    await fileTree.load();
+
-    
+    // Setup URL routing
-    // Initialize editor
+    setupPopStateListener();
-    editor = new MarkdownEditor('editor', 'preview', 'filenameInput');
+
+    // Initialize editor (always needed for preview)
+    // In view mode, editor is read-only
+    editor = new MarkdownEditor('editor', 'preview', 'filenameInput', !isEditMode);
     editor.setWebDAVClient(webdavClient);
 
-    // Add test content to verify preview works
+    // Initialize file tree (needed in both modes)
-    setTimeout(() => {
+    fileTree = new FileTree('fileTree', webdavClient);
-        if (!editor.editor.getValue()) {
+    fileTree.onFileSelect = async (item) => {
-            editor.editor.setValue('# Welcome to Markdown Editor\n\nStart typing to see preview...\n');
+        try {
-            editor.updatePreview();
+            await editor.loadFile(item.path);
+            // Highlight the file in the tree and expand parent directories
+            fileTree.selectAndExpandPath(item.path);
+            // Update URL to reflect current file
+            const currentCollection = collectionSelector.getCurrentCollection();
+            updateURL(currentCollection, item.path, isEditMode);
+        } catch (error) {
+            Logger.error('Failed to select file:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to load file', 'error');
+            }
         }
-    }, 200);
+    };
-    
-    // Setup editor drop handler
-    const editorDropHandler = new EditorDropHandler(
-        document.querySelector('.editor-container'),
-        async (file) => {
-            await handleEditorFileDrop(file);
-        }
-    );
-    
-    // Setup button handlers
-    document.getElementById('newBtn').addEventListener('click', () => {
-        editor.newFile();
-    });
-    
-    document.getElementById('saveBtn').addEventListener('click', async () => {
-        await editor.save();
-    });
-    
-    document.getElementById('deleteBtn').addEventListener('click', async () => {
-        await editor.deleteFile();
-    });
-    
-    // Setup context menu handlers
-    setupContextMenuHandlers();
-    
-    // Initialize mermaid
-    mermaid.initialize({ startOnLoad: true, theme: darkMode.isDark ? 'dark' : 'default' });
 
-    // Initialize file tree actions manager
+    fileTree.onFolderSelect = async (item) => {
-    window.fileTreeActions = new FileTreeActions(webdavClient, fileTree, editor);
+        try {
+            // Show directory preview
+            await showDirectoryPreview(item.path);
+            // Highlight the directory in the tree and expand parent directories
+            fileTree.selectAndExpandPath(item.path);
+            // Update URL to reflect current directory
+            const currentCollection = collectionSelector.getCurrentCollection();
+            updateURL(currentCollection, item.path, isEditMode);
+        } catch (error) {
+            Logger.error('Failed to select folder:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to load folder', 'error');
+            }
+        }
+    };
+
+    collectionSelector.onChange = async (collection) => {
+        try {
+            await fileTree.load();
+            // In view mode, auto-load last viewed page when collection changes
+            if (!isEditMode) {
+                await autoLoadPageInViewMode();
+            }
+        } catch (error) {
+            Logger.error('Failed to change collection:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to change collection', 'error');
+            }
+        }
+    };
+    await fileTree.load();
+
+    // Parse URL to load file if specified
+    const { collection: urlCollection, filePath: urlFilePath } = parseURLPath();
+    console.log('[URL PARSE]', { urlCollection, urlFilePath });
+
+    if (urlCollection && urlFilePath) {
+        console.log('[URL LOAD] Loading from URL:', urlCollection, urlFilePath);
+
+        // First ensure the collection is set
+        const currentCollection = collectionSelector.getCurrentCollection();
+        if (currentCollection !== urlCollection) {
+            console.log('[URL LOAD] Switching collection from', currentCollection, 'to', urlCollection);
+            await collectionSelector.setCollection(urlCollection);
+            await fileTree.load();
+        }
+
+        // Now load the file from URL
+        console.log('[URL LOAD] Calling loadFileFromURL');
+        await loadFileFromURL(urlCollection, urlFilePath);
+    } else if (!isEditMode) {
+        // In view mode, auto-load last viewed page if no URL file specified
+        await autoLoadPageInViewMode();
+    }
+
+    // Initialize file tree and editor-specific features only in edit mode
+    if (isEditMode) {
+        // Add test content to verify preview works
+        setTimeout(() => {
+            if (!editor.editor.getValue()) {
+                editor.editor.setValue('# Welcome to Markdown Editor\n\nStart typing to see preview...\n');
+                editor.updatePreview();
+            }
+        }, 200);
+
+        // Setup editor drop handler
+        const editorDropHandler = new EditorDropHandler(
+            document.querySelector('.editor-container'),
+            async (file) => {
+                try {
+                    await handleEditorFileDrop(file);
+                } catch (error) {
+                    Logger.error('Failed to handle file drop:', error);
+                }
+            }
+        );
+
+        // Setup button handlers
+        document.getElementById('newBtn').addEventListener('click', () => {
+            editor.newFile();
+        });
+
+        document.getElementById('saveBtn').addEventListener('click', async () => {
+            try {
+                await editor.save();
+            } catch (error) {
+                Logger.error('Failed to save file:', error);
+                if (window.showNotification) {
+                    window.showNotification('Failed to save file', 'error');
+                }
+            }
+        });
+
+        document.getElementById('deleteBtn').addEventListener('click', async () => {
+            try {
+                await editor.deleteFile();
+            } catch (error) {
+                Logger.error('Failed to delete file:', error);
+                if (window.showNotification) {
+                    window.showNotification('Failed to delete file', 'error');
+                }
+            }
+        });
+
+        // Setup context menu handlers
+        setupContextMenuHandlers();
+
+        // Initialize file tree actions manager
+        window.fileTreeActions = new FileTreeActions(webdavClient, fileTree, editor);
+    } else {
+        // In view mode, hide editor buttons
+        document.getElementById('newBtn').style.display = 'none';
+        document.getElementById('saveBtn').style.display = 'none';
+        document.getElementById('deleteBtn').style.display = 'none';
+
+        // Auto-load last viewed page or first file
+        await autoLoadPageInViewMode();
+    }
+
+    // Initialize mermaid (always needed)
+    mermaid.initialize({ startOnLoad: true, theme: darkMode.isDark ? 'dark' : 'default' });
     // Listen for file-saved event to reload file tree
     window.eventBus.on('file-saved', async (path) => {
-        if (fileTree) {
+        try {
-            await fileTree.load();
+            if (fileTree) {
-            fileTree.selectNode(path);
+                await fileTree.load();
+                fileTree.selectNode(path);
+            }
+        } catch (error) {
+            Logger.error('Failed to reload file tree after save:', error);
         }
     });
 
     window.eventBus.on('file-deleted', async () => {
-        if (fileTree) {
+        try {
-            await fileTree.load();
+            if (fileTree) {
+                await fileTree.load();
+            }
+        } catch (error) {
+            Logger.error('Failed to reload file tree after delete:', error);
         }
     });
 });
@@ -126,17 +456,17 @@ window.addEventListener('column-resize', () => {
  */
 function setupContextMenuHandlers() {
     const menu = document.getElementById('contextMenu');
-    
+
     menu.addEventListener('click', async (e) => {
         const item = e.target.closest('.context-menu-item');
         if (!item) return;
-        
+
         const action = item.dataset.action;
         const targetPath = menu.dataset.targetPath;
         const isDir = menu.dataset.targetIsDir === 'true';
-        
+
         hideContextMenu();
-        
+
         await window.fileTreeActions.execute(action, targetPath, isDir);
     });
 }
@@ -163,16 +493,16 @@ async function handleEditorFileDrop(file) {
             parts.pop(); // Remove filename
             targetDir = parts.join('/');
         }
-        
+
         // Upload file
         const uploadedPath = await fileTree.uploadFile(targetDir, file);
-        
+
         // Insert markdown link at cursor
         const isImage = file.type.startsWith('image/');
-        const link = isImage 
+        const link = isImage
             ? `![${file.name}](/${webdavClient.currentCollection}/${uploadedPath})`
             : `[${file.name}](/${webdavClient.currentCollection}/${uploadedPath})`;
-        
+
         editor.insertAtCursor(link);
         showNotification(`Uploaded and inserted link`, 'success');
     } catch (error) {

static/js/collection-selector.js

@@ -0,0 +1,100 @@
+/**
+ * Collection Selector Module
+ * Manages the collection dropdown selector and persistence
+ */
+
+class CollectionSelector {
+    constructor(selectId, webdavClient) {
+        this.select = document.getElementById(selectId);
+        this.webdavClient = webdavClient;
+        this.onChange = null;
+        this.storageKey = Config.STORAGE_KEYS.SELECTED_COLLECTION;
+    }
+
+    /**
+     * Load collections from WebDAV and populate the selector
+     */
+    async load() {
+        try {
+            const collections = await this.webdavClient.getCollections();
+            this.select.innerHTML = '';
+
+            collections.forEach(collection => {
+                const option = document.createElement('option');
+                option.value = collection;
+                option.textContent = collection;
+                this.select.appendChild(option);
+            });
+
+            // Try to restore previously selected collection from localStorage
+            const savedCollection = localStorage.getItem(this.storageKey);
+            let collectionToSelect = collections[0]; // Default to first
+
+            if (savedCollection && collections.includes(savedCollection)) {
+                collectionToSelect = savedCollection;
+            }
+
+            if (collections.length > 0) {
+                this.select.value = collectionToSelect;
+                this.webdavClient.setCollection(collectionToSelect);
+                if (this.onChange) {
+                    this.onChange(collectionToSelect);
+                }
+            }
+
+            // Add change listener
+            this.select.addEventListener('change', () => {
+                const collection = this.select.value;
+                // Save to localStorage
+                localStorage.setItem(this.storageKey, collection);
+                this.webdavClient.setCollection(collection);
+                
+                Logger.info(`Collection changed to: ${collection}`);
+                
+                if (this.onChange) {
+                    this.onChange(collection);
+                }
+            });
+            
+            Logger.debug(`Loaded ${collections.length} collections`);
+        } catch (error) {
+            Logger.error('Failed to load collections:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to load collections', 'error');
+            }
+        }
+    }
+
+    /**
+     * Get the currently selected collection
+     * @returns {string} The collection name
+     */
+    getCurrentCollection() {
+        return this.select.value;
+    }
+
+    /**
+     * Set the collection to a specific value
+     * @param {string} collection - The collection name to set
+     */
+    async setCollection(collection) {
+        const collections = Array.from(this.select.options).map(opt => opt.value);
+        if (collections.includes(collection)) {
+            this.select.value = collection;
+            localStorage.setItem(this.storageKey, collection);
+            this.webdavClient.setCollection(collection);
+            
+            Logger.info(`Collection set to: ${collection}`);
+            
+            if (this.onChange) {
+                this.onChange(collection);
+            }
+        } else {
+            Logger.warn(`Collection "${collection}" not found in available collections`);
+        }
+    }
+}
+
+// Make CollectionSelector globally available
+window.CollectionSelector = CollectionSelector;
+

static/js/column-resizer.js

@@ -10,68 +10,67 @@ class ColumnResizer {
         this.sidebarPane = document.getElementById('sidebarPane');
         this.editorPane = document.getElementById('editorPane');
         this.previewPane = document.getElementById('previewPane');
-        
+
         // Load saved dimensions
         this.loadDimensions();
-        
+
         // Setup listeners
         this.setupResizers();
     }
-    
+
     setupResizers() {
         this.resizer1.addEventListener('mousedown', (e) => this.startResize(e, 1));
         this.resizer2.addEventListener('mousedown', (e) => this.startResize(e, 2));
     }
-    
+
     startResize(e, resizerId) {
         e.preventDefault();
-        
+
         const startX = e.clientX;
         const startWidth1 = this.sidebarPane.offsetWidth;
         const startWidth2 = this.editorPane.offsetWidth;
         const containerWidth = this.sidebarPane.parentElement.offsetWidth;
-        
+
         const resizer = resizerId === 1 ? this.resizer1 : this.resizer2;
         resizer.classList.add('dragging');
-        
+
         const handleMouseMove = (moveEvent) => {
             const deltaX = moveEvent.clientX - startX;
-            
+
             if (resizerId === 1) {
                 // Resize sidebar and editor
                 const newWidth1 = Math.max(150, Math.min(40 * containerWidth / 100, startWidth1 + deltaX));
                 const newWidth2 = startWidth2 - (newWidth1 - startWidth1);
-                
+
                 this.sidebarPane.style.flex = `0 0 ${newWidth1}px`;
                 this.editorPane.style.flex = `1 1 ${newWidth2}px`;
             } else if (resizerId === 2) {
                 // Resize editor and preview
                 const newWidth2 = Math.max(250, Math.min(70 * containerWidth / 100, startWidth2 + deltaX));
                 const containerFlex = this.sidebarPane.offsetWidth;
-                
+
                 this.editorPane.style.flex = `0 0 ${newWidth2}px`;
-                this.previewPane.style.flex = `1 1 auto`;
             }
         };
-        
+
         const handleMouseUp = () => {
             resizer.classList.remove('dragging');
             document.removeEventListener('mousemove', handleMouseMove);
             document.removeEventListener('mouseup', handleMouseUp);
-            
+
             // Save dimensions
             this.saveDimensions();
-            
+
             // Trigger editor resize
             if (window.editor && window.editor.editor) {
                 window.editor.editor.refresh();
             }
         };
-        
+
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('mouseup', handleMouseUp);
     }
-    
+
     saveDimensions() {
         const dimensions = {
             sidebar: this.sidebarPane.offsetWidth,
@@ -80,16 +79,15 @@ class ColumnResizer {
         };
         localStorage.setItem('columnDimensions', JSON.stringify(dimensions));
     }
-    
+
     loadDimensions() {
         const saved = localStorage.getItem('columnDimensions');
         if (!saved) return;
-        
+
         try {
             const { sidebar, editor, preview } = JSON.parse(saved);
             this.sidebarPane.style.flex = `0 0 ${sidebar}px`;
             this.editorPane.style.flex = `0 0 ${editor}px`;
-            this.previewPane.style.flex = `1 1 auto`;
         } catch (error) {
             console.error('Failed to load column dimensions:', error);
         }

static/js/config.js

@@ -0,0 +1,202 @@
+/**
+ * Application Configuration
+ * Centralized configuration values for the markdown editor
+ */
+
+const Config = {
+    // ===== TIMING CONFIGURATION =====
+    
+    /**
+     * Long-press threshold in milliseconds
+     * Used for drag-and-drop detection in file tree
+     */
+    LONG_PRESS_THRESHOLD: 400,
+    
+    /**
+     * Debounce delay in milliseconds
+     * Used for editor preview updates
+     */
+    DEBOUNCE_DELAY: 300,
+    
+    /**
+     * Toast notification duration in milliseconds
+     */
+    TOAST_DURATION: 3000,
+    
+    /**
+     * Mouse move threshold in pixels
+     * Used to detect if user is dragging vs clicking
+     */
+    MOUSE_MOVE_THRESHOLD: 5,
+    
+    // ===== UI CONFIGURATION =====
+    
+    /**
+     * Drag preview width in pixels
+     * Width of the drag ghost image during drag-and-drop
+     */
+    DRAG_PREVIEW_WIDTH: 200,
+    
+    /**
+     * Tree indentation in pixels
+     * Indentation per level in the file tree
+     */
+    TREE_INDENT_PX: 12,
+    
+    /**
+     * Toast container z-index
+     * Ensures toasts appear above other elements
+     */
+    TOAST_Z_INDEX: 9999,
+    
+    /**
+     * Minimum sidebar width in pixels
+     */
+    MIN_SIDEBAR_WIDTH: 150,
+    
+    /**
+     * Maximum sidebar width as percentage of container
+     */
+    MAX_SIDEBAR_WIDTH_PERCENT: 40,
+    
+    /**
+     * Minimum editor width in pixels
+     */
+    MIN_EDITOR_WIDTH: 250,
+    
+    /**
+     * Maximum editor width as percentage of container
+     */
+    MAX_EDITOR_WIDTH_PERCENT: 70,
+    
+    // ===== VALIDATION CONFIGURATION =====
+    
+    /**
+     * Valid filename pattern
+     * Only lowercase letters, numbers, underscores, and dots allowed
+     */
+    FILENAME_PATTERN: /^[a-z0-9_]+(\.[a-z0-9_]+)*$/,
+    
+    /**
+     * Characters to replace in filenames
+     * All invalid characters will be replaced with underscore
+     */
+    FILENAME_INVALID_CHARS: /[^a-z0-9_.]/g,
+    
+    // ===== STORAGE KEYS =====
+    
+    /**
+     * LocalStorage keys used throughout the application
+     */
+    STORAGE_KEYS: {
+        /**
+         * Dark mode preference
+         */
+        DARK_MODE: 'darkMode',
+        
+        /**
+         * Currently selected collection
+         */
+        SELECTED_COLLECTION: 'selectedCollection',
+        
+        /**
+         * Last viewed page (per collection)
+         * Actual key will be: lastViewedPage:{collection}
+         */
+        LAST_VIEWED_PAGE: 'lastViewedPage',
+        
+        /**
+         * Column dimensions (sidebar, editor, preview widths)
+         */
+        COLUMN_DIMENSIONS: 'columnDimensions'
+    },
+    
+    // ===== EDITOR CONFIGURATION =====
+    
+    /**
+     * CodeMirror theme for light mode
+     */
+    EDITOR_THEME_LIGHT: 'default',
+    
+    /**
+     * CodeMirror theme for dark mode
+     */
+    EDITOR_THEME_DARK: 'monokai',
+    
+    /**
+     * Mermaid theme for light mode
+     */
+    MERMAID_THEME_LIGHT: 'default',
+    
+    /**
+     * Mermaid theme for dark mode
+     */
+    MERMAID_THEME_DARK: 'dark',
+    
+    // ===== FILE TREE CONFIGURATION =====
+    
+    /**
+     * Default content for new files
+     */
+    DEFAULT_FILE_CONTENT: '# New File\n\n',
+    
+    /**
+     * Default filename for new files
+     */
+    DEFAULT_NEW_FILENAME: 'new_file.md',
+    
+    /**
+     * Default folder name for new folders
+     */
+    DEFAULT_NEW_FOLDERNAME: 'new_folder',
+    
+    // ===== WEBDAV CONFIGURATION =====
+    
+    /**
+     * WebDAV base URL
+     */
+    WEBDAV_BASE_URL: '/fs/',
+    
+    /**
+     * PROPFIND depth for file tree loading
+     */
+    PROPFIND_DEPTH: 'infinity',
+    
+    // ===== DRAG AND DROP CONFIGURATION =====
+    
+    /**
+     * Drag preview opacity
+     */
+    DRAG_PREVIEW_OPACITY: 0.8,
+    
+    /**
+     * Dragging item opacity
+     */
+    DRAGGING_OPACITY: 0.4,
+    
+    /**
+     * Drag preview offset X in pixels
+     */
+    DRAG_PREVIEW_OFFSET_X: 10,
+    
+    /**
+     * Drag preview offset Y in pixels
+     */
+    DRAG_PREVIEW_OFFSET_Y: 10,
+    
+    // ===== NOTIFICATION TYPES =====
+    
+    /**
+     * Bootstrap notification type mappings
+     */
+    NOTIFICATION_TYPES: {
+        SUCCESS: 'success',
+        ERROR: 'danger',
+        WARNING: 'warning',
+        INFO: 'primary'
+    }
+};
+
+// Make Config globally available
+window.Config = Config;
+

static/js/confirmation.js

@@ -1,68 +1,169 @@
 /**
- * Confirmation Modal Manager
+ * Unified Modal Manager
  * Handles showing and hiding a Bootstrap modal for confirmations and prompts.
+ * Uses a single reusable modal element to prevent double-opening issues.
  */
-class Confirmation {
+class ModalManager {
     constructor(modalId) {
         this.modalElement = document.getElementById(modalId);
-        this.modal = new bootstrap.Modal(this.modalElement);
+        if (!this.modalElement) {
+            console.error(`Modal element with id "${modalId}" not found`);
+            return;
+        }
+
+        this.modal = new bootstrap.Modal(this.modalElement, {
+            backdrop: 'static',
+            keyboard: true
+        });
+
         this.messageElement = this.modalElement.querySelector('#confirmationMessage');
         this.inputElement = this.modalElement.querySelector('#confirmationInput');
         this.confirmButton = this.modalElement.querySelector('#confirmButton');
+        this.cancelButton = this.modalElement.querySelector('[data-bs-dismiss="modal"]');
         this.titleElement = this.modalElement.querySelector('.modal-title');
         this.currentResolver = null;
+        this.isShowing = false;
     }
 
-    _show(message, title, showInput = false, defaultValue = '') {
+    /**
+     * Show a confirmation dialog
+     * @param {string} message - The message to display
+     * @param {string} title - The dialog title
+     * @param {boolean} isDangerous - Whether this is a dangerous action (shows red button)
+     * @returns {Promise<boolean>} - Resolves to true if confirmed, false/null if cancelled
+     */
+    confirm(message, title = 'Confirmation', isDangerous = false) {
         return new Promise((resolve) => {
+            // Prevent double-opening
+            if (this.isShowing) {
+                console.warn('Modal is already showing, ignoring duplicate request');
+                resolve(null);
+                return;
+            }
+
+            this.isShowing = true;
             this.currentResolver = resolve;
             this.titleElement.textContent = title;
             this.messageElement.textContent = message;
+            this.inputElement.style.display = 'none';
 
-            if (showInput) {
+            // Update button styling based on danger level
-                this.inputElement.style.display = 'block';
+            if (isDangerous) {
-                this.inputElement.value = defaultValue;
+                this.confirmButton.className = 'btn btn-danger';
-                this.inputElement.focus();
+                this.confirmButton.textContent = 'Delete';
             } else {
-                this.inputElement.style.display = 'none';
+                this.confirmButton.className = 'btn btn-primary';
+                this.confirmButton.textContent = 'OK';
             }
 
-            this.confirmButton.onclick = () => this._handleConfirm(showInput);
+            // Set up event handlers
-            this.modalElement.addEventListener('hidden.bs.modal', () => this._handleCancel(), { once: true });
+            this.confirmButton.onclick = (e) => {
-            
+                e.preventDefault();
+                e.stopPropagation();
+                this._handleConfirm(false);
+            };
+
+            // Handle modal hidden event for cleanup
+            this.modalElement.addEventListener('hidden.bs.modal', () => {
+                if (this.currentResolver) {
+                    this._handleCancel();
+                }
+            }, { once: true });
+
             this.modal.show();
+
+            // Focus confirm button after modal is shown
+            this.modalElement.addEventListener('shown.bs.modal', () => {
+                this.confirmButton.focus();
+            }, { once: true });
+        });
+    }
+
+    /**
+     * Show a prompt dialog (input dialog)
+     * @param {string} message - The message/label to display
+     * @param {string} defaultValue - The default input value
+     * @param {string} title - The dialog title
+     * @returns {Promise<string|null>} - Resolves to input value if confirmed, null if cancelled
+     */
+    prompt(message, defaultValue = '', title = 'Input') {
+        return new Promise((resolve) => {
+            // Prevent double-opening
+            if (this.isShowing) {
+                console.warn('Modal is already showing, ignoring duplicate request');
+                resolve(null);
+                return;
+            }
+
+            this.isShowing = true;
+            this.currentResolver = resolve;
+            this.titleElement.textContent = title;
+            this.messageElement.textContent = message;
+            this.inputElement.style.display = 'block';
+            this.inputElement.value = defaultValue;
+
+            // Reset button to primary style for prompts
+            this.confirmButton.className = 'btn btn-primary';
+            this.confirmButton.textContent = 'OK';
+
+            // Set up event handlers
+            this.confirmButton.onclick = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this._handleConfirm(true);
+            };
+
+            // Handle Enter key in input
+            this.inputElement.onkeydown = (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    this._handleConfirm(true);
+                }
+            };
+
+            // Handle modal hidden event for cleanup
+            this.modalElement.addEventListener('hidden.bs.modal', () => {
+                if (this.currentResolver) {
+                    this._handleCancel();
+                }
+            }, { once: true });
+
+            this.modal.show();
+
+            // Focus and select input after modal is shown
+            this.modalElement.addEventListener('shown.bs.modal', () => {
+                this.inputElement.focus();
+                this.inputElement.select();
+            }, { once: true });
         });
     }
 
     _handleConfirm(isPrompt) {
         if (this.currentResolver) {
-            const value = isPrompt ? this.inputElement.value : true;
+            const value = isPrompt ? this.inputElement.value.trim() : true;
-            this.currentResolver(value);
+            const resolver = this.currentResolver;
             this._cleanup();
+            resolver(value);
         }
     }
 
     _handleCancel() {
         if (this.currentResolver) {
-            this.currentResolver(null); // Resolve with null for cancellation
+            const resolver = this.currentResolver;
             this._cleanup();
+            resolver(null);
         }
     }
 
     _cleanup() {
         this.confirmButton.onclick = null;
-        this.modal.hide();
+        this.inputElement.onkeydown = null;
         this.currentResolver = null;
-    }
+        this.isShowing = false;
-
+        this.modal.hide();
-    confirm(message, title = 'Confirmation') {
-        return this._show(message, title, false);
-    }
-
-    prompt(message, defaultValue = '', title = 'Prompt') {
-        return this._show(message, title, true, defaultValue);
     }
 }
 
 // Make it globally available
-window.ConfirmationManager = new Confirmation('confirmationModal');
+window.ConfirmationManager = new ModalManager('confirmationModal');
+window.ModalManager = window.ConfirmationManager; // Alias for clarity

static/js/context-menu.js

@@ -0,0 +1,89 @@
+/**
+ * Context Menu Module
+ * Handles the right-click context menu for file tree items
+ */
+
+/**
+ * Show context menu at specified position
+ * @param {number} x - X coordinate
+ * @param {number} y - Y coordinate
+ * @param {Object} target - Target object with path and isDir properties
+ */
+function showContextMenu(x, y, target) {
+    const menu = document.getElementById('contextMenu');
+    if (!menu) return;
+
+    // Store target data
+    menu.dataset.targetPath = target.path;
+    menu.dataset.targetIsDir = target.isDir;
+
+    // Show/hide menu items based on target type
+    const items = {
+        'new-file': target.isDir,
+        'new-folder': target.isDir,
+        'upload': target.isDir,
+        'download': true,
+        'paste': target.isDir && window.fileTreeActions?.clipboard,
+        'open': !target.isDir
+    };
+
+    Object.entries(items).forEach(([action, show]) => {
+        const item = menu.querySelector(`[data-action="${action}"]`);
+        if (item) {
+            item.style.display = show ? 'flex' : 'none';
+        }
+    });
+
+    // Position menu
+    menu.style.display = 'block';
+    menu.style.left = x + 'px';
+    menu.style.top = y + 'px';
+
+    // Adjust if off-screen
+    setTimeout(() => {
+        const rect = menu.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+            menu.style.left = (window.innerWidth - rect.width - 10) + 'px';
+        }
+        if (rect.bottom > window.innerHeight) {
+            menu.style.top = (window.innerHeight - rect.height - 10) + 'px';
+        }
+    }, 0);
+}
+
+/**
+ * Hide the context menu
+ */
+function hideContextMenu() {
+    const menu = document.getElementById('contextMenu');
+    if (menu) {
+        menu.style.display = 'none';
+    }
+}
+
+// Combined click handler for context menu and outside clicks
+document.addEventListener('click', async (e) => {
+    const menuItem = e.target.closest('.context-menu-item');
+
+    if (menuItem) {
+        // Handle context menu item click
+        const action = menuItem.dataset.action;
+        const menu = document.getElementById('contextMenu');
+        const targetPath = menu.dataset.targetPath;
+        const isDir = menu.dataset.targetIsDir === 'true';
+
+        hideContextMenu();
+
+        if (window.fileTreeActions) {
+            await window.fileTreeActions.execute(action, targetPath, isDir);
+        }
+    } else if (!e.target.closest('#contextMenu') && !e.target.closest('.tree-node')) {
+        // Hide on outside click
+        hideContextMenu();
+    }
+});
+
+// Make functions globally available
+window.showContextMenu = showContextMenu;
+window.hideContextMenu = hideContextMenu;
+

static/js/dark-mode.js

@@ -0,0 +1,77 @@
+/**
+ * Dark Mode Module
+ * Manages dark mode theme switching and persistence
+ */
+
+class DarkMode {
+    constructor() {
+        this.isDark = localStorage.getItem(Config.STORAGE_KEYS.DARK_MODE) === 'true';
+        this.apply();
+    }
+
+    /**
+     * Toggle dark mode on/off
+     */
+    toggle() {
+        this.isDark = !this.isDark;
+        localStorage.setItem(Config.STORAGE_KEYS.DARK_MODE, this.isDark);
+        this.apply();
+        
+        Logger.debug(`Dark mode ${this.isDark ? 'enabled' : 'disabled'}`);
+    }
+
+    /**
+     * Apply the current dark mode state
+     */
+    apply() {
+        if (this.isDark) {
+            document.body.classList.add('dark-mode');
+            const btn = document.getElementById('darkModeBtn');
+            if (btn) btn.textContent = '☀️';
+
+            // Update mermaid theme
+            if (window.mermaid) {
+                mermaid.initialize({ theme: Config.MERMAID_THEME_DARK });
+            }
+        } else {
+            document.body.classList.remove('dark-mode');
+            const btn = document.getElementById('darkModeBtn');
+            if (btn) btn.textContent = '🌙';
+
+            // Update mermaid theme
+            if (window.mermaid) {
+                mermaid.initialize({ theme: Config.MERMAID_THEME_LIGHT });
+            }
+        }
+    }
+
+    /**
+     * Check if dark mode is currently enabled
+     * @returns {boolean} True if dark mode is enabled
+     */
+    isEnabled() {
+        return this.isDark;
+    }
+
+    /**
+     * Enable dark mode
+     */
+    enable() {
+        if (!this.isDark) {
+            this.toggle();
+        }
+    }
+
+    /**
+     * Disable dark mode
+     */
+    disable() {
+        if (this.isDark) {
+            this.toggle();
+        }
+    }
+}
+
+// Make DarkMode globally available
+window.DarkMode = DarkMode;
+

static/js/editor-drop-handler.js

@@ -0,0 +1,67 @@
+/**
+ * Editor Drop Handler Module
+ * Handles file drops into the editor for uploading
+ */
+
+class EditorDropHandler {
+    constructor(editorElement, onFileDrop) {
+        this.editorElement = editorElement;
+        this.onFileDrop = onFileDrop;
+        this.setupHandlers();
+    }
+
+    /**
+     * Setup drag and drop event handlers
+     */
+    setupHandlers() {
+        this.editorElement.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.editorElement.classList.add('drag-over');
+        });
+
+        this.editorElement.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.editorElement.classList.remove('drag-over');
+        });
+
+        this.editorElement.addEventListener('drop', async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.editorElement.classList.remove('drag-over');
+
+            const files = Array.from(e.dataTransfer.files);
+            if (files.length === 0) return;
+
+            Logger.debug(`Dropped ${files.length} file(s) into editor`);
+
+            for (const file of files) {
+                try {
+                    if (this.onFileDrop) {
+                        await this.onFileDrop(file);
+                    }
+                } catch (error) {
+                    Logger.error('Drop failed:', error);
+                    if (window.showNotification) {
+                        window.showNotification(`Failed to upload ${file.name}`, 'error');
+                    }
+                }
+            }
+        });
+    }
+
+    /**
+     * Remove event handlers
+     */
+    destroy() {
+        // Note: We can't easily remove the event listeners without keeping references
+        // This is a limitation of the current implementation
+        // In a future refactor, we could store the bound handlers
+        Logger.debug('EditorDropHandler destroyed');
+    }
+}
+
+// Make EditorDropHandler globally available
+window.EditorDropHandler = EditorDropHandler;
+

static/js/editor.js

@@ -4,15 +4,21 @@
  */
 
 class MarkdownEditor {
-    constructor(editorId, previewId, filenameInputId) {
+    constructor(editorId, previewId, filenameInputId, readOnly = false) {
         this.editorElement = document.getElementById(editorId);
         this.previewElement = document.getElementById(previewId);
         this.filenameInput = document.getElementById(filenameInputId);
         this.currentFile = null;
         this.webdavClient = null;
         this.macroProcessor = new MacroProcessor(null); // Will be set later
-        
+        this.lastViewedStorageKey = 'lastViewedPage'; // localStorage key for tracking last viewed page
-        this.initCodeMirror();
+        this.readOnly = readOnly; // Whether editor is in read-only mode
+        this.editor = null; // Will be initialized later
+
+        // Only initialize CodeMirror if not in read-only mode (view mode)
+        if (!readOnly) {
+            this.initCodeMirror();
+        }
         this.initMarkdown();
         this.initMermaid();
     }
@@ -21,22 +27,27 @@ class MarkdownEditor {
      * Initialize CodeMirror
      */
     initCodeMirror() {
+        // Determine theme based on dark mode
+        const isDarkMode = document.body.classList.contains('dark-mode');
+        const theme = isDarkMode ? 'monokai' : 'default';
+
         this.editor = CodeMirror(this.editorElement, {
             mode: 'markdown',
-            theme: 'monokai',
+            theme: theme,
             lineNumbers: true,
             lineWrapping: true,
-            autofocus: true,
+            autofocus: !this.readOnly, // Don't autofocus in read-only mode
-            extraKeys: {
+            readOnly: this.readOnly, // Set read-only mode
+            extraKeys: this.readOnly ? {} : {
                 'Ctrl-S': () => this.save(),
                 'Cmd-S': () => this.save()
             }
         });
 
         // Update preview on change with debouncing
-        this.editor.on('change', this.debounce(() => {
+        this.editor.on('change', TimingUtils.debounce(() => {
             this.updatePreview();
-        }, 300));
+        }, Config.DEBOUNCE_DELAY));
 
         // Initial preview render
         setTimeout(() => {
@@ -47,6 +58,27 @@ class MarkdownEditor {
         this.editor.on('scroll', () => {
             this.syncScroll();
         });
+
+        // Listen for dark mode changes
+        this.setupThemeListener();
+    }
+
+    /**
+     * Setup listener for dark mode changes
+     */
+    setupThemeListener() {
+        // Watch for dark mode class changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'class') {
+                    const isDarkMode = document.body.classList.contains('dark-mode');
+                    const newTheme = isDarkMode ? 'monokai' : 'default';
+                    this.editor.setOption('theme', newTheme);
+                }
+            });
+        });
+
+        observer.observe(document.body, { attributes: true });
     }
 
     /**
@@ -87,7 +119,7 @@ class MarkdownEditor {
      */
     setWebDAVClient(client) {
         this.webdavClient = client;
-        
+
         // Update macro processor with client
         if (this.macroProcessor) {
             this.macroProcessor.webdavClient = client;
@@ -101,13 +133,23 @@ class MarkdownEditor {
         try {
             const content = await this.webdavClient.get(path);
             this.currentFile = path;
-            this.filenameInput.value = path;
+
-            this.editor.setValue(content);
+            // Update filename input if it exists
-            this.updatePreview();
+            if (this.filenameInput) {
-            
+                this.filenameInput.value = path;
-            if (window.showNotification) {
-                window.showNotification(`Loaded ${path}`, 'info');
             }
+
+            // Update editor if it exists (edit mode)
+            if (this.editor) {
+                this.editor.setValue(content);
+            }
+
+            // Update preview with the loaded content
+            await this.renderPreview(content);
+
+            // Save as last viewed page
+            this.saveLastViewedPage(path);
+            // No notification for successful file load - it's not critical
         } catch (error) {
             console.error('Failed to load file:', error);
             if (window.showNotification) {
@@ -116,6 +158,32 @@ class MarkdownEditor {
         }
     }
 
+    /**
+     * Save the last viewed page to localStorage
+     * Stores per collection so different collections can have different last viewed pages
+     */
+    saveLastViewedPage(path) {
+        if (!this.webdavClient || !this.webdavClient.currentCollection) {
+            return;
+        }
+        const collection = this.webdavClient.currentCollection;
+        const storageKey = `${this.lastViewedStorageKey}:${collection}`;
+        localStorage.setItem(storageKey, path);
+    }
+
+    /**
+     * Get the last viewed page from localStorage
+     * Returns null if no page was previously viewed
+     */
+    getLastViewedPage() {
+        if (!this.webdavClient || !this.webdavClient.currentCollection) {
+            return null;
+        }
+        const collection = this.webdavClient.currentCollection;
+        const storageKey = `${this.lastViewedStorageKey}:${collection}`;
+        return localStorage.getItem(storageKey);
+    }
+
     /**
      * Save file
      */
@@ -133,7 +201,7 @@ class MarkdownEditor {
         try {
             await this.webdavClient.put(path, content);
             this.currentFile = path;
-            
+
             if (window.showNotification) {
                 window.showNotification('✅ Saved', 'success');
             }
@@ -159,10 +227,7 @@ class MarkdownEditor {
         this.filenameInput.focus();
         this.editor.setValue('# New File\n\nStart typing...\n');
         this.updatePreview();
-
+        // No notification needed - UI is self-explanatory
-        if (window.showNotification) {
-            window.showNotification('Enter filename and start typing', 'info');
-        }
     }
 
     /**
@@ -174,7 +239,7 @@ class MarkdownEditor {
             return;
         }
 
-        const confirmed = await window.ConfirmationManager.confirm(`Are you sure you want to delete ${this.currentFile}?`, 'Delete File');
+        const confirmed = await window.ConfirmationManager.confirm(`Are you sure you want to delete ${this.currentFile}?`, 'Delete File', true);
         if (confirmed) {
             try {
                 await this.webdavClient.delete(this.currentFile);
@@ -189,10 +254,12 @@ class MarkdownEditor {
     }
 
     /**
-     * Update preview
+     * Render preview from markdown content
+     * Can be called with explicit content (for view mode) or from editor (for edit mode)
      */
-    async updatePreview() {
+    async renderPreview(markdownContent = null) {
-        const markdown = this.editor.getValue();
+        // Get markdown content from editor if not provided
+        const markdown = markdownContent !== null ? markdownContent : (this.editor ? this.editor.getValue() : '');
         const previewDiv = this.previewElement;
 
         if (!markdown || !markdown.trim()) {
@@ -207,24 +274,19 @@ class MarkdownEditor {
         try {
             // Step 1: Process macros
             let processedContent = markdown;
-            
+
             if (this.macroProcessor) {
                 const processingResult = await this.macroProcessor.processMacros(markdown);
                 processedContent = processingResult.content;
-                
-                // Log errors if any
-                if (processingResult.errors.length > 0) {
-                    console.warn('Macro processing errors:', processingResult.errors);
-                }
             }
-            
+
             // Step 2: Parse markdown to HTML
             if (!this.marked) {
                 console.error("Markdown parser (marked) not initialized.");
                 previewDiv.innerHTML = `<div class="alert alert-danger">Preview engine not loaded.</div>`;
                 return;
             }
-            
+
             let html = this.marked.parse(processedContent);
 
             // Replace mermaid code blocks
@@ -270,13 +332,25 @@ class MarkdownEditor {
         }
     }
 
+    /**
+     * Update preview (backward compatibility wrapper)
+     * Calls renderPreview with content from editor
+     */
+    async updatePreview() {
+        if (this.editor) {
+            await this.renderPreview();
+        }
+    }
+
     /**
      * Sync scroll between editor and preview
      */
     syncScroll() {
+        if (!this.editor) return; // Skip if no editor (view mode)
+
         const scrollInfo = this.editor.getScrollInfo();
         const scrollPercent = scrollInfo.top / (scrollInfo.height - scrollInfo.clientHeight);
-        
+
         const previewHeight = this.previewElement.scrollHeight - this.previewElement.clientHeight;
         this.previewElement.scrollTop = previewHeight * scrollPercent;
     }
@@ -289,10 +363,10 @@ class MarkdownEditor {
             const filename = await this.webdavClient.uploadImage(file);
             const imageUrl = `/fs/${this.webdavClient.currentCollection}/images/${filename}`;
             const markdown = `![${file.name}](${imageUrl})`;
-            
+
             // Insert at cursor
             this.editor.replaceSelection(markdown);
-            
+
             if (window.showNotification) {
                 window.showNotification('Image uploaded', 'success');
             }
@@ -310,7 +384,7 @@ class MarkdownEditor {
     getValue() {
         return this.editor.getValue();
     }
-    
+
     insertAtCursor(text) {
         const doc = this.editor.getDoc();
         const cursor = doc.getCursor();
@@ -324,20 +398,7 @@ class MarkdownEditor {
         this.editor.setValue(content);
     }
 
-    /**
+    // Debounce function moved to TimingUtils in utils.js
-     * Debounce function
-     */
-    debounce(func, wait) {
-        let timeout;
-        return function executedFunction(...args) {
-            const later = () => {
-                clearTimeout(timeout);
-                func(...args);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    }
 }
 
 // Export for use in other modules

static/js/event-bus.js

@@ -0,0 +1,126 @@
+/**
+ * Event Bus Module
+ * Provides a centralized event system for application-wide communication
+ * Allows components to communicate without tight coupling
+ */
+
+class EventBus {
+    constructor() {
+        /**
+         * Map of event names to arrays of listener functions
+         * @type {Object.<string, Function[]>}
+         */
+        this.listeners = {};
+    }
+
+    /**
+     * Register an event listener
+     * @param {string} event - The event name to listen for
+     * @param {Function} callback - The function to call when the event is dispatched
+     * @returns {Function} A function to unregister this listener
+     */
+    on(event, callback) {
+        if (!this.listeners[event]) {
+            this.listeners[event] = [];
+        }
+        this.listeners[event].push(callback);
+
+        // Return unsubscribe function
+        return () => this.off(event, callback);
+    }
+
+    /**
+     * Register a one-time event listener
+     * The listener will be automatically removed after being called once
+     * @param {string} event - The event name to listen for
+     * @param {Function} callback - The function to call when the event is dispatched
+     * @returns {Function} A function to unregister this listener
+     */
+    once(event, callback) {
+        const onceWrapper = (data) => {
+            callback(data);
+            this.off(event, onceWrapper);
+        };
+        return this.on(event, onceWrapper);
+    }
+
+    /**
+     * Unregister an event listener
+     * @param {string} event - The event name
+     * @param {Function} callback - The callback function to remove
+     */
+    off(event, callback) {
+        if (!this.listeners[event]) {
+            return;
+        }
+
+        this.listeners[event] = this.listeners[event].filter(
+            listener => listener !== callback
+        );
+
+        // Clean up empty listener arrays
+        if (this.listeners[event].length === 0) {
+            delete this.listeners[event];
+        }
+    }
+
+    /**
+     * Dispatch an event to all registered listeners
+     * @param {string} event - The event name to dispatch
+     * @param {any} data - The data to pass to the listeners
+     */
+    dispatch(event, data) {
+        if (!this.listeners[event]) {
+            return;
+        }
+
+        // Create a copy of the listeners array to avoid issues if listeners are added/removed during dispatch
+        const listeners = [...this.listeners[event]];
+        
+        listeners.forEach(callback => {
+            try {
+                callback(data);
+            } catch (error) {
+                Logger.error(`Error in event listener for "${event}":`, error);
+            }
+        });
+    }
+
+    /**
+     * Remove all listeners for a specific event
+     * If no event is specified, removes all listeners for all events
+     * @param {string} [event] - The event name (optional)
+     */
+    clear(event) {
+        if (event) {
+            delete this.listeners[event];
+        } else {
+            this.listeners = {};
+        }
+    }
+
+    /**
+     * Get the number of listeners for an event
+     * @param {string} event - The event name
+     * @returns {number} The number of listeners
+     */
+    listenerCount(event) {
+        return this.listeners[event] ? this.listeners[event].length : 0;
+    }
+
+    /**
+     * Get all event names that have listeners
+     * @returns {string[]} Array of event names
+     */
+    eventNames() {
+        return Object.keys(this.listeners);
+    }
+}
+
+// Create and export the global event bus instance
+const eventBus = new EventBus();
+
+// Make it globally available
+window.eventBus = eventBus;
+window.EventBus = EventBus;
+

static/js/file-tree-actions.js

@@ -14,32 +14,10 @@ class FileTreeActions {
     /**
      * Validate and sanitize filename/folder name
      * Returns { valid: boolean, sanitized: string, message: string }
+     * Now uses ValidationUtils from utils.js
      */
     validateFileName(name, isFolder = false) {
-        const type = isFolder ? 'folder' : 'file';
+        return ValidationUtils.validateFileName(name, isFolder);
-        
-        if (!name || name.trim().length === 0) {
-            return { valid: false, message: `${type} name cannot be empty` };
-        }
-        
-        // Check for invalid characters
-        const validPattern = /^[a-z0-9_]+(\.[a-z0-9_]+)*$/;
-        
-        if (!validPattern.test(name)) {
-            const sanitized = name
-                .toLowerCase()
-                .replace(/[^a-z0-9_.]/g, '_')
-                .replace(/_+/g, '_')
-                .replace(/^_+|_+$/g, '');
-            
-            return {
-                valid: false,
-                sanitized,
-                message: `Invalid characters in ${type} name. Only lowercase letters, numbers, and underscores allowed.\n\nSuggestion: "${sanitized}"`
-            };
-        }
-        
-        return { valid: true, sanitized: name, message: '' };
     }
 
     async execute(action, targetPath, isDirectory) {
@@ -48,7 +26,7 @@ class FileTreeActions {
             console.error(`Unknown action: ${action}`);
             return;
         }
-        
+
         try {
             await handler.call(this, targetPath, isDirectory);
         } catch (error) {
@@ -58,140 +36,198 @@ class FileTreeActions {
     }
 
     actions = {
-        open: async function(path, isDir) {
+        open: async function (path, isDir) {
             if (!isDir) {
                 await this.editor.loadFile(path);
             }
         },
 
-        'new-file': async function(path, isDir) {
+        'new-file': async function (path, isDir) {
             if (!isDir) return;
-            
+
-            await this.showInputDialog('Enter filename (lowercase, underscore only):', 'new_file.md', async (filename) => {
+            const filename = await window.ModalManager.prompt(
-                if (!filename) return;
+                'Enter filename (lowercase, underscore only):',
-                
+                'new_file.md',
-                const validation = this.validateFileName(filename, false);
+                'New File'
-                
+            );
-                if (!validation.valid) {
+
-                    showNotification(validation.message, 'warning');
+            if (!filename) return;
-                    
+
-                    // Ask if user wants to use sanitized version
+            let finalFilename = filename;
-                    if (validation.sanitized) {
+            const validation = this.validateFileName(filename, false);
-                        if (await this.showConfirmDialog('Use sanitized name?', `${filename} → ${validation.sanitized}`)) {
+
-                            filename = validation.sanitized;
+            if (!validation.valid) {
-                        } else {
+                showNotification(validation.message, 'warning');
-                            return;
+
-                        }
+                // Ask if user wants to use sanitized version
+                if (validation.sanitized) {
+                    const useSanitized = await window.ModalManager.confirm(
+                        `${filename} → ${validation.sanitized}`,
+                        'Use sanitized name?',
+                        false
+                    );
+                    if (useSanitized) {
+                        finalFilename = validation.sanitized;
                     } else {
                         return;
                     }
+                } else {
+                    return;
                 }
-                
+            }
-                const fullPath = `${path}/${filename}`.replace(/\/+/g, '/');
+
-                await this.webdavClient.put(fullPath, '# New File\n\n');
+            const fullPath = `${path}/${finalFilename}`.replace(/\/+/g, '/');
-                await this.fileTree.load();
+            await this.webdavClient.put(fullPath, '# New File\n\n');
-                showNotification(`Created ${filename}`, 'success');
+
-                await this.editor.loadFile(fullPath);
+            // Clear undo history since new file was created
-            });
+            if (this.fileTree.lastMoveOperation) {
+                this.fileTree.lastMoveOperation = null;
+            }
+
+            await this.fileTree.load();
+            showNotification(`Created ${finalFilename}`, 'success');
+            await this.editor.loadFile(fullPath);
         },
 
-        'new-folder': async function(path, isDir) {
+        'new-folder': async function (path, isDir) {
             if (!isDir) return;
-            
+
-            await this.showInputDialog('Enter folder name (lowercase, underscore only):', 'new_folder', async (foldername) => {
+            const foldername = await window.ModalManager.prompt(
-                if (!foldername) return;
+                'Enter folder name (lowercase, underscore only):',
-                
+                'new_folder',
-                const validation = this.validateFileName(foldername, true);
+                'New Folder'
-                
+            );
-                if (!validation.valid) {
+
-                    showNotification(validation.message, 'warning');
+            if (!foldername) return;
-                    
+
-                    if (validation.sanitized) {
+            let finalFoldername = foldername;
-                        if (await this.showConfirmDialog('Use sanitized name?', `${foldername} → ${validation.sanitized}`)) {
+            const validation = this.validateFileName(foldername, true);
-                            foldername = validation.sanitized;
+
-                        } else {
+            if (!validation.valid) {
-                            return;
+                showNotification(validation.message, 'warning');
-                        }
+
+                if (validation.sanitized) {
+                    const useSanitized = await window.ModalManager.confirm(
+                        `${foldername} → ${validation.sanitized}`,
+                        'Use sanitized name?',
+                        false
+                    );
+                    if (useSanitized) {
+                        finalFoldername = validation.sanitized;
                     } else {
                         return;
                     }
+                } else {
+                    return;
                 }
-                
+            }
-                const fullPath = `${path}/${foldername}`.replace(/\/+/g, '/');
+
-                await this.webdavClient.mkcol(fullPath);
+            const fullPath = `${path}/${finalFoldername}`.replace(/\/+/g, '/');
-                await this.fileTree.load();
+            await this.webdavClient.mkcol(fullPath);
-                showNotification(`Created folder ${foldername}`, 'success');
+
-            });
+            // Clear undo history since new folder was created
+            if (this.fileTree.lastMoveOperation) {
+                this.fileTree.lastMoveOperation = null;
+            }
+
+            await this.fileTree.load();
+            showNotification(`Created folder ${finalFoldername}`, 'success');
         },
 
-        rename: async function(path, isDir) {
+        rename: async function (path, isDir) {
             const oldName = path.split('/').pop();
-            const newName = await this.showInputDialog('Rename to:', oldName);
+            const newName = await window.ModalManager.prompt(
+                'Rename to:',
+                oldName,
+                'Rename'
+            );
+
             if (newName && newName !== oldName) {
                 const parentPath = path.substring(0, path.lastIndexOf('/'));
                 const newPath = parentPath ? `${parentPath}/${newName}` : newName;
                 await this.webdavClient.move(path, newPath);
+
+                // Clear undo history since manual rename occurred
+                if (this.fileTree.lastMoveOperation) {
+                    this.fileTree.lastMoveOperation = null;
+                }
+
                 await this.fileTree.load();
                 showNotification('Renamed', 'success');
             }
         },
 
-        copy: async function(path, isDir) {
+        copy: async function (path, isDir) {
             this.clipboard = { path, operation: 'copy', isDirectory: isDir };
-            showNotification(`Copied: ${path.split('/').pop()}`, 'info');
+            // No notification for copy - it's a quick operation
             this.updatePasteMenuItem();
         },
 
-        cut: async function(path, isDir) {
+        cut: async function (path, isDir) {
             this.clipboard = { path, operation: 'cut', isDirectory: isDir };
-            showNotification(`Cut: ${path.split('/').pop()}`, 'warning');
+            // No notification for cut - it's a quick operation
             this.updatePasteMenuItem();
         },
 
-        paste: async function(targetPath, isDir) {
+        paste: async function (targetPath, isDir) {
             if (!this.clipboard || !isDir) return;
-            
+
             const itemName = this.clipboard.path.split('/').pop();
             const destPath = `${targetPath}/${itemName}`.replace(/\/+/g, '/');
-            
+
             if (this.clipboard.operation === 'copy') {
                 await this.webdavClient.copy(this.clipboard.path, destPath);
-                showNotification('Copied', 'success');
+                // No notification for paste - file tree updates show the result
             } else {
                 await this.webdavClient.move(this.clipboard.path, destPath);
                 this.clipboard = null;
                 this.updatePasteMenuItem();
-                showNotification('Moved', 'success');
+                // No notification for move - file tree updates show the result
             }
-            
+
             await this.fileTree.load();
         },
 
-        delete: async function(path, isDir) {
+        delete: async function (path, isDir) {
             const name = path.split('/').pop();
             const type = isDir ? 'folder' : 'file';
-            
+
-            if (!await this.showConfirmDialog(`Delete this ${type}?`, `${name}`)) {
+            const confirmed = await window.ModalManager.confirm(
-                return;
+                `Are you sure you want to delete ${name}?`,
-            }
+                `Delete this ${type}?`,
-            
+                true
+            );
+
+            if (!confirmed) return;
+
             await this.webdavClient.delete(path);
+
+            // Clear undo history since manual delete occurred
+            if (this.fileTree.lastMoveOperation) {
+                this.fileTree.lastMoveOperation = null;
+            }
+
             await this.fileTree.load();
             showNotification(`Deleted ${name}`, 'success');
         },
 
-        download: async function(path, isDir) {
+        download: async function (path, isDir) {
-            showNotification('Downloading...', 'info');
+            Logger.info(`Downloading ${isDir ? 'folder' : 'file'}: ${path}`);
-            // Implementation here
+
+            if (isDir) {
+                await this.fileTree.downloadFolder(path);
+            } else {
+                await this.fileTree.downloadFile(path);
+            }
         },
 
-        upload: async function(path, isDir) {
+        upload: async function (path, isDir) {
             if (!isDir) return;
-            
+
             const input = document.createElement('input');
             input.type = 'file';
             input.multiple = true;
-            
+
             input.onchange = async (e) => {
                 const files = Array.from(e.target.files);
                 for (const file of files) {
@@ -202,156 +238,12 @@ class FileTreeActions {
                 }
                 await this.fileTree.load();
             };
-            
+
             input.click();
         }
     };
 
-    // Modern dialog implementations
+    // Old deprecated modal methods removed - all modals now use window.ModalManager
-    async showInputDialog(title, placeholder = '', callback) {
-        return new Promise((resolve) => {
-            const dialog = this.createInputDialog(title, placeholder);
-            const input = dialog.querySelector('input');
-            const confirmBtn = dialog.querySelector('.btn-primary');
-            const cancelBtn = dialog.querySelector('.btn-secondary');
-
-            const cleanup = (value) => {
-                const modalInstance = bootstrap.Modal.getInstance(dialog);
-                if (modalInstance) {
-                    modalInstance.hide();
-                }
-                dialog.remove();
-                const backdrop = document.querySelector('.modal-backdrop');
-                if (backdrop) backdrop.remove();
-                document.body.classList.remove('modal-open');
-                resolve(value);
-                if (callback) callback(value);
-            };
-
-            confirmBtn.onclick = () => {
-                cleanup(input.value.trim());
-            };
-
-            cancelBtn.onclick = () => {
-                cleanup(null);
-            };
-
-            dialog.addEventListener('hidden.bs.modal', () => {
-                cleanup(null);
-            });
-
-            input.onkeypress = (e) => {
-                if (e.key === 'Enter') confirmBtn.click();
-            };
-
-            document.body.appendChild(dialog);
-            const modal = new bootstrap.Modal(dialog);
-            modal.show();
-            input.focus();
-            input.select();
-        });
-    }
-
-    async showConfirmDialog(title, message = '', callback) {
-        return new Promise((resolve) => {
-            const dialog = this.createConfirmDialog(title, message);
-            const confirmBtn = dialog.querySelector('.btn-danger');
-            const cancelBtn = dialog.querySelector('.btn-secondary');
-
-            const cleanup = (value) => {
-                const modalInstance = bootstrap.Modal.getInstance(dialog);
-                if (modalInstance) {
-                    modalInstance.hide();
-                }
-                dialog.remove();
-                const backdrop = document.querySelector('.modal-backdrop');
-                if (backdrop) backdrop.remove();
-                document.body.classList.remove('modal-open');
-                resolve(value);
-                if (callback) callback(value);
-            };
-
-            confirmBtn.onclick = () => {
-                cleanup(true);
-            };
-
-            cancelBtn.onclick = () => {
-                cleanup(false);
-            };
-
-            dialog.addEventListener('hidden.bs.modal', () => {
-                cleanup(false);
-            });
-
-            document.body.appendChild(dialog);
-            const modal = new bootstrap.Modal(dialog);
-            modal.show();
-            confirmBtn.focus();
-        });
-    }
-
-    createInputDialog(title, placeholder) {
-        const backdrop = document.createElement('div');
-        backdrop.className = 'modal-backdrop fade show';
-        
-        const dialog = document.createElement('div');
-        dialog.className = 'modal fade show d-block';
-        dialog.setAttribute('tabindex', '-1');
-        dialog.style.display = 'block';
-        
-        dialog.innerHTML = `
-            <div class="modal-dialog modal-dialog-centered">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">${title}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                    </div>
-                    <div class="modal-body">
-                        <input type="text" class="form-control" value="${placeholder}" autofocus>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                        <button type="button" class="btn btn-primary">OK</button>
-                    </div>
-                </div>
-            </div>
-        `;
-        
-        document.body.appendChild(backdrop);
-        return dialog;
-    }
-
-    createConfirmDialog(title, message) {
-        const backdrop = document.createElement('div');
-        backdrop.className = 'modal-backdrop fade show';
-        
-        const dialog = document.createElement('div');
-        dialog.className = 'modal fade show d-block';
-        dialog.setAttribute('tabindex', '-1');
-        dialog.style.display = 'block';
-        
-        dialog.innerHTML = `
-            <div class="modal-dialog modal-dialog-centered">
-                <div class="modal-content">
-                    <div class="modal-header border-danger">
-                        <h5 class="modal-title text-danger">${title}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-                    </div>
-                    <div class="modal-body">
-                        <p>${message}</p>
-                        <p class="text-danger small">This action cannot be undone.</p>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                        <button type="button" class="btn btn-danger">Delete</button>
-                    </div>
-                </div>
-            </div>
-        `;
-        
-        document.body.appendChild(backdrop);
-        return dialog;
-    }
 
     updatePasteMenuItem() {
         const pasteItem = document.getElementById('pasteMenuItem');

static/js/file-tree.js

@@ -11,23 +11,41 @@ class FileTree {
         this.selectedPath = null;
         this.onFileSelect = null;
         this.onFolderSelect = null;
-        
+
+        // Drag and drop state
+        this.draggedNode = null;
+        this.draggedPath = null;
+        this.draggedIsDir = false;
+
+        // Long-press detection
+        this.longPressTimer = null;
+        this.longPressThreshold = Config.LONG_PRESS_THRESHOLD;
+        this.isDraggingEnabled = false;
+        this.mouseDownNode = null;
+
+        // Undo functionality
+        this.lastMoveOperation = null;
+
         this.setupEventListeners();
+        this.setupUndoListener();
     }
-    
+
     setupEventListeners() {
         // Click handler for tree nodes
         this.container.addEventListener('click', (e) => {
-            console.log('Container clicked', e.target);
             const node = e.target.closest('.tree-node');
             if (!node) return;
-            
+
-            console.log('Node found', node);
             const path = node.dataset.path;
             const isDir = node.dataset.isdir === 'true';
-            
+
-            // The toggle is handled inside renderNodes now
+            // Check if toggle was clicked (icon or toggle button)
-            
+            const toggle = e.target.closest('.tree-node-toggle');
+            if (toggle) {
+                // Toggle is handled by its own click listener in renderNodes
+                return;
+            }
+
             // Select node
             if (isDir) {
                 this.selectFolder(path);
@@ -35,9 +53,19 @@ class FileTree {
                 this.selectFile(path);
             }
         });
-        
+
-        // Context menu
+        // Context menu (only in edit mode)
         this.container.addEventListener('contextmenu', (e) => {
+            // Check if we're in edit mode
+            const isEditMode = document.body.classList.contains('edit-mode');
+
+            // In view mode, disable custom context menu entirely
+            if (!isEditMode) {
+                e.preventDefault(); // Prevent default browser context menu
+                return; // Don't show custom context menu
+            }
+
+            // Edit mode: show custom context menu
             const node = e.target.closest('.tree-node');
             e.preventDefault();
 
@@ -51,8 +79,335 @@ class FileTree {
                 window.showContextMenu(e.clientX, e.clientY, { path: '', isDir: true });
             }
         });
+
+        // Drag and drop event listeners (only in edit mode)
+        this.setupDragAndDrop();
     }
-    
+
+    setupUndoListener() {
+        // Listen for Ctrl+Z (Windows/Linux) or Cmd+Z (Mac)
+        document.addEventListener('keydown', async (e) => {
+            // Check for Ctrl+Z or Cmd+Z
+            const isUndo = (e.ctrlKey || e.metaKey) && e.key === 'z';
+
+            if (isUndo && this.isEditMode() && this.lastMoveOperation) {
+                e.preventDefault();
+                await this.undoLastMove();
+            }
+        });
+    }
+
+    async undoLastMove() {
+        if (!this.lastMoveOperation) {
+            return;
+        }
+
+        const { sourcePath, destPath, fileName, isDirectory } = this.lastMoveOperation;
+
+        try {
+            // Move the item back to its original location
+            await this.webdavClient.move(destPath, sourcePath);
+
+            // Get the parent folder name for the notification
+            const sourceParent = PathUtils.getParentPath(sourcePath);
+            const parentName = sourceParent ? sourceParent + '/' : 'root';
+
+            // Clear the undo history
+            this.lastMoveOperation = null;
+
+            // Reload the tree
+            await this.load();
+
+            // Re-select the moved item
+            this.selectAndExpandPath(sourcePath);
+
+            showNotification(`Undo: Moved ${fileName} back to ${parentName}`, 'success');
+        } catch (error) {
+            console.error('Failed to undo move:', error);
+            showNotification('Failed to undo move: ' + error.message, 'danger');
+        }
+    }
+
+    setupDragAndDrop() {
+        // Dragover event on container to allow dropping on root level
+        this.container.addEventListener('dragover', (e) => {
+            if (!this.isEditMode() || !this.draggedPath) return;
+
+            const node = e.target.closest('.tree-node');
+            if (!node) {
+                // Hovering over empty space (root level)
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+
+                // Highlight the entire container as a drop target
+                this.container.classList.add('drag-over-root');
+            }
+        });
+
+        // Dragleave event on container to remove root-level highlighting
+        this.container.addEventListener('dragleave', (e) => {
+            if (!this.isEditMode()) return;
+
+            // Only remove if we're actually leaving the container
+            // Check if the related target is outside the container
+            if (!this.container.contains(e.relatedTarget)) {
+                this.container.classList.remove('drag-over-root');
+            }
+        });
+
+        // Dragenter event to manage highlighting
+        this.container.addEventListener('dragenter', (e) => {
+            if (!this.isEditMode() || !this.draggedPath) return;
+
+            const node = e.target.closest('.tree-node');
+            if (!node) {
+                // Entering empty space
+                this.container.classList.add('drag-over-root');
+            } else {
+                // Entering a node, remove root highlighting
+                this.container.classList.remove('drag-over-root');
+            }
+        });
+
+        // Drop event on container for root level drops
+        this.container.addEventListener('drop', async (e) => {
+            if (!this.isEditMode()) return;
+
+            const node = e.target.closest('.tree-node');
+            if (!node && this.draggedPath) {
+                // Dropped on root level
+                e.preventDefault();
+                this.container.classList.remove('drag-over-root');
+                await this.handleDrop('', true);
+            }
+        });
+    }
+
+    isEditMode() {
+        return document.body.classList.contains('edit-mode');
+    }
+
+    setupNodeDragHandlers(nodeElement, node) {
+        // Dragstart - when user starts dragging
+        nodeElement.addEventListener('dragstart', (e) => {
+            this.draggedNode = nodeElement;
+            this.draggedPath = node.path;
+            this.draggedIsDir = node.isDirectory;
+
+            nodeElement.classList.add('dragging');
+            document.body.classList.add('dragging-active');
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', node.path);
+
+            // Create a custom drag image with fixed width
+            const dragImage = nodeElement.cloneNode(true);
+            dragImage.style.position = 'absolute';
+            dragImage.style.top = '-9999px';
+            dragImage.style.left = '-9999px';
+            dragImage.style.width = `${Config.DRAG_PREVIEW_WIDTH}px`;
+            dragImage.style.maxWidth = `${Config.DRAG_PREVIEW_WIDTH}px`;
+            dragImage.style.opacity = Config.DRAG_PREVIEW_OPACITY;
+            dragImage.style.backgroundColor = 'var(--bg-secondary)';
+            dragImage.style.border = '1px solid var(--border-color)';
+            dragImage.style.borderRadius = '4px';
+            dragImage.style.padding = '4px 8px';
+            dragImage.style.whiteSpace = 'nowrap';
+            dragImage.style.overflow = 'hidden';
+            dragImage.style.textOverflow = 'ellipsis';
+
+            document.body.appendChild(dragImage);
+            e.dataTransfer.setDragImage(dragImage, 10, 10);
+            setTimeout(() => {
+                if (dragImage.parentNode) {
+                    document.body.removeChild(dragImage);
+                }
+            }, 0);
+        });
+
+        // Dragend - when drag operation ends
+        nodeElement.addEventListener('dragend', () => {
+            nodeElement.classList.remove('dragging');
+            nodeElement.classList.remove('drag-ready');
+            document.body.classList.remove('dragging-active');
+            this.container.classList.remove('drag-over-root');
+            this.clearDragOverStates();
+
+            // Reset draggable state
+            nodeElement.draggable = false;
+            nodeElement.style.cursor = '';
+            this.isDraggingEnabled = false;
+
+            this.draggedNode = null;
+            this.draggedPath = null;
+            this.draggedIsDir = false;
+        });
+
+        // Dragover - when dragging over this node
+        nodeElement.addEventListener('dragover', (e) => {
+            if (!this.draggedPath) return;
+
+            const targetPath = node.path;
+            const targetIsDir = node.isDirectory;
+
+            // Only allow dropping on directories
+            if (!targetIsDir) {
+                e.dataTransfer.dropEffect = 'none';
+                return;
+            }
+
+            // Check if this is a valid drop target
+            if (this.isValidDropTarget(this.draggedPath, this.draggedIsDir, targetPath)) {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                nodeElement.classList.add('drag-over');
+            } else {
+                e.dataTransfer.dropEffect = 'none';
+            }
+        });
+
+        // Dragleave - when drag leaves this node
+        nodeElement.addEventListener('dragleave', (e) => {
+            // Only remove if we're actually leaving the node (not entering a child)
+            if (e.target === nodeElement) {
+                nodeElement.classList.remove('drag-over');
+
+                // If leaving a node and not entering another node, might be going to root
+                const relatedNode = e.relatedTarget?.closest('.tree-node');
+                if (!relatedNode && this.container.contains(e.relatedTarget)) {
+                    // Moving to empty space (root area)
+                    this.container.classList.add('drag-over-root');
+                }
+            }
+        });
+
+        // Drop - when item is dropped on this node
+        nodeElement.addEventListener('drop', async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            nodeElement.classList.remove('drag-over');
+
+            if (!this.draggedPath) return;
+
+            const targetPath = node.path;
+            const targetIsDir = node.isDirectory;
+
+            if (targetIsDir && this.isValidDropTarget(this.draggedPath, this.draggedIsDir, targetPath)) {
+                await this.handleDrop(targetPath, targetIsDir);
+            }
+        });
+    }
+
+    clearDragOverStates() {
+        this.container.querySelectorAll('.drag-over').forEach(node => {
+            node.classList.remove('drag-over');
+        });
+    }
+
+    isValidDropTarget(sourcePath, sourceIsDir, targetPath) {
+        // Can't drop on itself
+        if (sourcePath === targetPath) {
+            return false;
+        }
+
+        // If dragging a directory, can't drop into its own descendants
+        if (sourceIsDir) {
+            // Check if target is a descendant of source
+            if (targetPath.startsWith(sourcePath + '/')) {
+                return false;
+            }
+        }
+
+        // Can't drop into the same parent directory
+        const sourceParent = PathUtils.getParentPath(sourcePath);
+        if (sourceParent === targetPath) {
+            return false;
+        }
+
+        return true;
+    }
+
+    async handleDrop(targetPath, targetIsDir) {
+        if (!this.draggedPath) return;
+
+        try {
+            const sourcePath = this.draggedPath;
+            const fileName = PathUtils.getFileName(sourcePath);
+            const isDirectory = this.draggedIsDir;
+
+            // Construct destination path
+            let destPath;
+            if (targetPath === '') {
+                // Dropping to root
+                destPath = fileName;
+            } else {
+                destPath = `${targetPath}/${fileName}`;
+            }
+
+            // Check if destination already exists
+            const destNode = this.findNode(destPath);
+            if (destNode) {
+                const overwrite = await window.ModalManager.confirm(
+                    `A ${destNode.isDirectory ? 'folder' : 'file'} named "${fileName}" already exists in the destination. Do you want to overwrite it?`,
+                    'Name Conflict',
+                    true
+                );
+
+                if (!overwrite) {
+                    return;
+                }
+
+                // Delete existing item first
+                await this.webdavClient.delete(destPath);
+
+                // Clear undo history since we're overwriting
+                this.lastMoveOperation = null;
+            }
+
+            // Perform the move
+            await this.webdavClient.move(sourcePath, destPath);
+
+            // Store undo information (only if not overwriting)
+            if (!destNode) {
+                this.lastMoveOperation = {
+                    sourcePath: sourcePath,
+                    destPath: destPath,
+                    fileName: fileName,
+                    isDirectory: isDirectory
+                };
+            }
+
+            // If the moved item was the currently selected file, update the selection
+            if (this.selectedPath === sourcePath) {
+                this.selectedPath = destPath;
+
+                // Update editor's current file path if it's the file being moved
+                if (!this.draggedIsDir && window.editor && window.editor.currentFile === sourcePath) {
+                    window.editor.currentFile = destPath;
+                    if (window.editor.filenameInput) {
+                        window.editor.filenameInput.value = destPath;
+                    }
+                }
+
+                // Notify file select callback if it's a file
+                if (!this.draggedIsDir && this.onFileSelect) {
+                    this.onFileSelect({ path: destPath, isDirectory: false });
+                }
+            }
+
+            // Reload the tree
+            await this.load();
+
+            // Re-select the moved item
+            this.selectAndExpandPath(destPath);
+
+            showNotification(`Moved ${fileName} successfully`, 'success');
+        } catch (error) {
+            console.error('Failed to move item:', error);
+            showNotification('Failed to move item: ' + error.message, 'danger');
+        }
+    }
+
     async load() {
         try {
             const items = await this.webdavClient.propfind('', 'infinity');
@@ -63,12 +418,12 @@ class FileTree {
             showNotification('Failed to load files', 'error');
         }
     }
-    
+
     render() {
         this.container.innerHTML = '';
         this.renderNodes(this.tree, this.container, 0);
     }
-    
+
     renderNodes(nodes, parentElement, level) {
         nodes.forEach(node => {
             const nodeWrapper = document.createElement('div');
@@ -78,40 +433,56 @@ class FileTree {
             const nodeElement = this.createNodeElement(node, level);
             nodeWrapper.appendChild(nodeElement);
 
-            // Create children container ONLY if has children
+            // Create children container for directories
-            if (node.children && node.children.length > 0) {
+            if (node.isDirectory) {
                 const childContainer = document.createElement('div');
                 childContainer.className = 'tree-children';
                 childContainer.style.display = 'none';
                 childContainer.dataset.parent = node.path;
                 childContainer.style.marginLeft = `${(level + 1) * 12}px`;
 
-                // Recursively render children
+                // Only render children if they exist
-                this.renderNodes(node.children, childContainer, level + 1);
+                if (node.children && node.children.length > 0) {
+                    this.renderNodes(node.children, childContainer, level + 1);
+                } else {
+                    // Empty directory - show empty state message
+                    const emptyMessage = document.createElement('div');
+                    emptyMessage.className = 'tree-empty-message';
+                    emptyMessage.textContent = 'Empty folder';
+                    childContainer.appendChild(emptyMessage);
+                }
+
                 nodeWrapper.appendChild(childContainer);
 
-                // Make toggle functional
+                // Make toggle functional for ALL directories (including empty ones)
                 const toggle = nodeElement.querySelector('.tree-node-toggle');
                 if (toggle) {
-                    toggle.addEventListener('click', (e) => {
+                    const toggleHandler = (e) => {
-                        console.log('Toggle clicked', e.target);
                         e.stopPropagation();
                         const isHidden = childContainer.style.display === 'none';
-                        console.log('Is hidden?', isHidden);
                         childContainer.style.display = isHidden ? 'block' : 'none';
-                        toggle.innerHTML = isHidden ? '▼' : '▶';
+                        toggle.style.transform = isHidden ? 'rotate(90deg)' : 'rotate(0deg)';
                         toggle.classList.toggle('expanded');
-                    });
+                    };
+
+                    // Add click listener to toggle icon
+                    toggle.addEventListener('click', toggleHandler);
+
+                    // Also allow double-click on the node to toggle
+                    nodeElement.addEventListener('dblclick', toggleHandler);
+
+                    // Make toggle cursor pointer for all directories
+                    toggle.style.cursor = 'pointer';
                 }
             }
 
             parentElement.appendChild(nodeWrapper);
         });
     }
-    
+
-    
+
     // toggleFolder is no longer needed as the event listener is added in renderNodes.
-    
+
     selectFile(path) {
         this.selectedPath = path;
         this.updateSelection();
@@ -119,7 +490,7 @@ class FileTree {
             this.onFileSelect({ path, isDirectory: false });
         }
     }
-    
+
     selectFolder(path) {
         this.selectedPath = path;
         this.updateSelection();
@@ -127,18 +498,111 @@ class FileTree {
             this.onFolderSelect({ path, isDirectory: true });
         }
     }
-    
+
+    /**
+     * Find a node by path
+     * @param {string} path - The path to find
+     * @returns {Object|null} The node or null if not found
+     */
+    findNode(path) {
+        const search = (nodes, targetPath) => {
+            for (const node of nodes) {
+                if (node.path === targetPath) {
+                    return node;
+                }
+                if (node.children && node.children.length > 0) {
+                    const found = search(node.children, targetPath);
+                    if (found) return found;
+                }
+            }
+            return null;
+        };
+
+        return search(this.tree, path);
+    }
+
+    /**
+     * Get all files in a directory (direct children only)
+     * @param {string} dirPath - The directory path
+     * @returns {Array} Array of file nodes
+     */
+    getDirectoryFiles(dirPath) {
+        const dirNode = this.findNode(dirPath);
+        if (dirNode && dirNode.children) {
+            return dirNode.children.filter(child => !child.isDirectory);
+        }
+        return [];
+    }
+
     updateSelection() {
         // Remove previous selection
         this.container.querySelectorAll('.tree-node').forEach(node => {
-            node.classList.remove('selected');
+            node.classList.remove('active');
         });
-        
+
-        // Add selection to current
+        // Add selection to current and all parent directories
         if (this.selectedPath) {
+            // Add active class to the selected file/folder
             const node = this.container.querySelector(`[data-path="${this.selectedPath}"]`);
             if (node) {
-                node.classList.add('selected');
+                node.classList.add('active');
+            }
+
+            // Add active class to all parent directories
+            const parts = this.selectedPath.split('/');
+            let currentPath = '';
+            for (let i = 0; i < parts.length - 1; i++) {
+                currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+                const parentNode = this.container.querySelector(`[data-path="${currentPath}"]`);
+                if (parentNode) {
+                    parentNode.classList.add('active');
+                }
+            }
+        }
+    }
+
+    /**
+     * Highlight a file as active and expand all parent directories
+     * @param {string} path - The file path to highlight
+     */
+    selectAndExpandPath(path) {
+        this.selectedPath = path;
+
+        // Expand all parent directories
+        this.expandParentDirectories(path);
+
+        // Update selection
+        this.updateSelection();
+    }
+
+    /**
+     * Expand all parent directories of a given path
+     * @param {string} path - The file path
+     */
+    expandParentDirectories(path) {
+        // Get all parent paths
+        const parts = path.split('/');
+        let currentPath = '';
+
+        for (let i = 0; i < parts.length - 1; i++) {
+            currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+
+            // Find the node with this path
+            const parentNode = this.container.querySelector(`[data-path="${currentPath}"]`);
+            if (parentNode && parentNode.dataset.isdir === 'true') {
+                // Find the children container
+                const wrapper = parentNode.closest('.tree-node-wrapper');
+                if (wrapper) {
+                    const childContainer = wrapper.querySelector('.tree-children');
+                    if (childContainer && childContainer.style.display === 'none') {
+                        // Expand it
+                        childContainer.style.display = 'block';
+                        const toggle = parentNode.querySelector('.tree-node-toggle');
+                        if (toggle) {
+                            toggle.classList.add('expanded');
+                        }
+                    }
+                }
             }
         }
     }
@@ -150,25 +614,111 @@ class FileTree {
         nodeElement.dataset.isdir = node.isDirectory;
         nodeElement.style.paddingLeft = `${level * 12}px`;
 
-        const icon = document.createElement('span');
+        // Enable drag and drop in edit mode with long-press detection
-        icon.className = 'tree-node-icon';
+        if (this.isEditMode()) {
+            // Start with draggable disabled
+            nodeElement.draggable = false;
+            this.setupNodeDragHandlers(nodeElement, node);
+            this.setupLongPressDetection(nodeElement, node);
+        }
+
+        // Create toggle/icon container
+        const iconContainer = document.createElement('span');
+        iconContainer.className = 'tree-node-icon';
+
         if (node.isDirectory) {
-            icon.innerHTML = '▶'; // Collapsed by default
+            // Create toggle icon for folders
-            icon.classList.add('tree-node-toggle');
+            const toggle = document.createElement('i');
+            toggle.className = 'bi bi-chevron-right tree-node-toggle';
+            toggle.style.fontSize = '12px';
+            iconContainer.appendChild(toggle);
         } else {
-            icon.innerHTML = '●'; // File icon
+            // Create file icon
+            const fileIcon = document.createElement('i');
+            fileIcon.className = 'bi bi-file-earmark-text';
+            fileIcon.style.fontSize = '14px';
+            iconContainer.appendChild(fileIcon);
         }
 
         const title = document.createElement('span');
         title.className = 'tree-node-title';
         title.textContent = node.name;
 
-        nodeElement.appendChild(icon);
+        nodeElement.appendChild(iconContainer);
         nodeElement.appendChild(title);
 
         return nodeElement;
     }
-    
+
+    setupLongPressDetection(nodeElement, node) {
+        // Mouse down - start long-press timer
+        nodeElement.addEventListener('mousedown', (e) => {
+            // Ignore if clicking on toggle button
+            if (e.target.closest('.tree-node-toggle')) {
+                return;
+            }
+
+            this.mouseDownNode = nodeElement;
+
+            // Start timer for long-press
+            this.longPressTimer = setTimeout(() => {
+                // Long-press threshold met - enable dragging
+                this.isDraggingEnabled = true;
+                nodeElement.draggable = true;
+                nodeElement.classList.add('drag-ready');
+
+                // Change cursor to grab
+                nodeElement.style.cursor = 'grab';
+            }, this.longPressThreshold);
+        });
+
+        // Mouse up - cancel long-press timer
+        nodeElement.addEventListener('mouseup', () => {
+            this.clearLongPressTimer();
+        });
+
+        // Mouse leave - cancel long-press timer
+        nodeElement.addEventListener('mouseleave', () => {
+            this.clearLongPressTimer();
+        });
+
+        // Mouse move - cancel long-press if moved too much
+        let startX, startY;
+        nodeElement.addEventListener('mousedown', (e) => {
+            startX = e.clientX;
+            startY = e.clientY;
+        });
+
+        nodeElement.addEventListener('mousemove', (e) => {
+            if (this.longPressTimer && !this.isDraggingEnabled) {
+                const deltaX = Math.abs(e.clientX - startX);
+                const deltaY = Math.abs(e.clientY - startY);
+
+                // If mouse moved more than threshold, cancel long-press
+                if (deltaX > Config.MOUSE_MOVE_THRESHOLD || deltaY > Config.MOUSE_MOVE_THRESHOLD) {
+                    this.clearLongPressTimer();
+                }
+            }
+        });
+    }
+
+    clearLongPressTimer() {
+        if (this.longPressTimer) {
+            clearTimeout(this.longPressTimer);
+            this.longPressTimer = null;
+        }
+
+        // Reset dragging state if not currently dragging
+        if (!this.draggedPath && this.mouseDownNode) {
+            this.mouseDownNode.draggable = false;
+            this.mouseDownNode.classList.remove('drag-ready');
+            this.mouseDownNode.style.cursor = '';
+            this.isDraggingEnabled = false;
+        }
+
+        this.mouseDownNode = null;
+    }
+
     formatSize(bytes) {
         if (bytes === 0) return '0 B';
         const k = 1024;
@@ -176,7 +726,7 @@ class FileTree {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return Math.round(bytes / Math.pow(k, i) * 10) / 10 + ' ' + sizes[i];
     }
-    
+
     newFile() {
         this.selectedPath = null;
         this.updateSelection();
@@ -200,7 +750,7 @@ class FileTree {
             throw error;
         }
     }
-    
+
     async createFolder(parentPath, foldername) {
         try {
             const fullPath = parentPath ? `${parentPath}/${foldername}` : foldername;
@@ -214,7 +764,7 @@ class FileTree {
             throw error;
         }
     }
-    
+
     async uploadFile(parentPath, file) {
         try {
             const fullPath = parentPath ? `${parentPath}/${file.name}` : file.name;
@@ -229,63 +779,76 @@ class FileTree {
             throw error;
         }
     }
-    
+
     async downloadFile(path) {
         try {
             const content = await this.webdavClient.get(path);
-            const filename = path.split('/').pop();
+            const filename = PathUtils.getFileName(path);
-            this.triggerDownload(content, filename);
+            DownloadUtils.triggerDownload(content, filename);
             showNotification('Downloaded', 'success');
         } catch (error) {
             console.error('Failed to download file:', error);
             showNotification('Failed to download file', 'error');
         }
     }
-    
+
     async downloadFolder(path) {
         try {
             showNotification('Creating zip...', 'info');
             // Get all files in folder
             const items = await this.webdavClient.propfind(path, 'infinity');
             const files = items.filter(item => !item.isDirectory);
-            
+
             // Use JSZip to create zip file
             const JSZip = window.JSZip;
             if (!JSZip) {
                 throw new Error('JSZip not loaded');
             }
-            
+
             const zip = new JSZip();
-            const folder = zip.folder(path.split('/').pop() || 'download');
+            const folder = zip.folder(PathUtils.getFileName(path) || 'download');
-            
+
             // Add all files to zip
             for (const file of files) {
                 const content = await this.webdavClient.get(file.path);
                 const relativePath = file.path.replace(path + '/', '');
                 folder.file(relativePath, content);
             }
-            
+
             // Generate zip
             const zipBlob = await zip.generateAsync({ type: 'blob' });
-            const zipFilename = `${path.split('/').pop() || 'download'}.zip`;
+            const zipFilename = `${PathUtils.getFileName(path) || 'download'}.zip`;
-            this.triggerDownload(zipBlob, zipFilename);
+            DownloadUtils.triggerDownload(zipBlob, zipFilename);
             showNotification('Downloaded', 'success');
         } catch (error) {
             console.error('Failed to download folder:', error);
             showNotification('Failed to download folder', 'error');
         }
     }
-    
+
-    triggerDownload(content, filename) {
+    // triggerDownload method moved to DownloadUtils in utils.js
-        const blob = content instanceof Blob ? content : new Blob([content]);
+
-        const url = URL.createObjectURL(blob);
+    /**
-        const a = document.createElement('a');
+     * Get the first markdown file in the tree
-        a.href = url;
+     * Returns the path of the first .md file found, or null if none exist
-        a.download = filename;
+     */
-        document.body.appendChild(a);
+    getFirstMarkdownFile() {
-        a.click();
+        const findFirstFile = (nodes) => {
-        document.body.removeChild(a);
+            for (const node of nodes) {
-        URL.revokeObjectURL(url);
+                // If it's a file and ends with .md, return it
+                if (!node.isDirectory && node.path.endsWith('.md')) {
+                    return node.path;
+                }
+                // If it's a directory with children, search recursively
+                if (node.isDirectory && node.children && node.children.length > 0) {
+                    const found = findFirstFile(node.children);
+                    if (found) return found;
+                }
+            }
+            return null;
+        };
+
+        return findFirstFile(this.tree);
     }
 }
 

static/js/file-upload.js

@@ -0,0 +1,37 @@
+/**
+ * File Upload Module
+ * Handles file upload dialog for uploading files to the file tree
+ */
+
+/**
+ * Show file upload dialog
+ * @param {string} targetPath - The target directory path
+ * @param {Function} onUpload - Callback function to handle file upload
+ */
+function showFileUploadDialog(targetPath, onUpload) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+
+    input.addEventListener('change', async (e) => {
+        const files = Array.from(e.target.files);
+        if (files.length === 0) return;
+
+        for (const file of files) {
+            try {
+                await onUpload(targetPath, file);
+            } catch (error) {
+                Logger.error('Upload failed:', error);
+                if (window.showNotification) {
+                    window.showNotification(`Failed to upload ${file.name}`, 'error');
+                }
+            }
+        }
+    });
+
+    input.click();
+}
+
+// Make function globally available
+window.showFileUploadDialog = showFileUploadDialog;
+

static/js/logger.js

@@ -0,0 +1,174 @@
+/**
+ * Logger Module
+ * Provides structured logging with different levels
+ * Can be configured to show/hide different log levels
+ */
+
+class Logger {
+    /**
+     * Log levels
+     */
+    static LEVELS = {
+        DEBUG: 0,
+        INFO: 1,
+        WARN: 2,
+        ERROR: 3,
+        NONE: 4
+    };
+
+    /**
+     * Current log level
+     * Set to DEBUG by default, can be changed via setLevel()
+     */
+    static currentLevel = Logger.LEVELS.DEBUG;
+
+    /**
+     * Enable/disable logging
+     */
+    static enabled = true;
+
+    /**
+     * Set the minimum log level
+     * @param {number} level - One of Logger.LEVELS
+     */
+    static setLevel(level) {
+        if (typeof level === 'number' && level >= 0 && level <= 4) {
+            Logger.currentLevel = level;
+        }
+    }
+
+    /**
+     * Enable or disable logging
+     * @param {boolean} enabled - Whether to enable logging
+     */
+    static setEnabled(enabled) {
+        Logger.enabled = enabled;
+    }
+
+    /**
+     * Log a debug message
+     * @param {string} message - The message to log
+     * @param {...any} args - Additional arguments to log
+     */
+    static debug(message, ...args) {
+        if (!Logger.enabled || Logger.currentLevel > Logger.LEVELS.DEBUG) {
+            return;
+        }
+        console.log(`[DEBUG] ${message}`, ...args);
+    }
+
+    /**
+     * Log an info message
+     * @param {string} message - The message to log
+     * @param {...any} args - Additional arguments to log
+     */
+    static info(message, ...args) {
+        if (!Logger.enabled || Logger.currentLevel > Logger.LEVELS.INFO) {
+            return;
+        }
+        console.info(`[INFO] ${message}`, ...args);
+    }
+
+    /**
+     * Log a warning message
+     * @param {string} message - The message to log
+     * @param {...any} args - Additional arguments to log
+     */
+    static warn(message, ...args) {
+        if (!Logger.enabled || Logger.currentLevel > Logger.LEVELS.WARN) {
+            return;
+        }
+        console.warn(`[WARN] ${message}`, ...args);
+    }
+
+    /**
+     * Log an error message
+     * @param {string} message - The message to log
+     * @param {...any} args - Additional arguments to log
+     */
+    static error(message, ...args) {
+        if (!Logger.enabled || Logger.currentLevel > Logger.LEVELS.ERROR) {
+            return;
+        }
+        console.error(`[ERROR] ${message}`, ...args);
+    }
+
+    /**
+     * Log a message with a custom prefix
+     * @param {string} prefix - The prefix to use
+     * @param {string} message - The message to log
+     * @param {...any} args - Additional arguments to log
+     */
+    static log(prefix, message, ...args) {
+        if (!Logger.enabled) {
+            return;
+        }
+        console.log(`[${prefix}] ${message}`, ...args);
+    }
+
+    /**
+     * Group related log messages
+     * @param {string} label - The group label
+     */
+    static group(label) {
+        if (!Logger.enabled) {
+            return;
+        }
+        console.group(label);
+    }
+
+    /**
+     * End a log group
+     */
+    static groupEnd() {
+        if (!Logger.enabled) {
+            return;
+        }
+        console.groupEnd();
+    }
+
+    /**
+     * Log a table (useful for arrays of objects)
+     * @param {any} data - The data to display as a table
+     */
+    static table(data) {
+        if (!Logger.enabled) {
+            return;
+        }
+        console.table(data);
+    }
+
+    /**
+     * Start a timer
+     * @param {string} label - The timer label
+     */
+    static time(label) {
+        if (!Logger.enabled) {
+            return;
+        }
+        console.time(label);
+    }
+
+    /**
+     * End a timer and log the elapsed time
+     * @param {string} label - The timer label
+     */
+    static timeEnd(label) {
+        if (!Logger.enabled) {
+            return;
+        }
+        console.timeEnd(label);
+    }
+}
+
+// Make Logger globally available
+window.Logger = Logger;
+
+// Set default log level based on environment
+// In production, you might want to set this to WARN or ERROR
+if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+    Logger.setLevel(Logger.LEVELS.DEBUG);
+} else {
+    Logger.setLevel(Logger.LEVELS.INFO);
+}
+

static/js/macro-processor.js

@@ -10,7 +10,7 @@ class MacroProcessor {
         this.includeStack = []; // Track includes to detect cycles
         this.registerDefaultPlugins();
     }
-    
+
     /**
      * Register a macro plugin
      * Plugin must implement: { canHandle(actor, method), process(macro, webdavClient) }
@@ -19,27 +19,23 @@ class MacroProcessor {
         const key = `${actor}.${method}`;
         this.plugins.set(key, plugin);
     }
-    
+
     /**
      * Process all macros in content
      * Returns { success: boolean, content: string, errors: [] }
      */
     async processMacros(content) {
-        console.log('MacroProcessor: Starting macro processing for content:', content);
         const macros = MacroParser.extractMacros(content);
-        console.log('MacroProcessor: Extracted macros:', macros);
         const errors = [];
         let processedContent = content;
-        
+
         // Process macros in reverse order to preserve positions
         for (let i = macros.length - 1; i >= 0; i--) {
             const macro = macros[i];
-            console.log('MacroProcessor: Processing macro:', macro);
+
-            
             try {
                 const result = await this.processMacro(macro);
-                console.log('MacroProcessor: Macro processing result:', result);
+
-                
                 if (result.success) {
                     // Replace macro with result
                     processedContent =
@@ -51,7 +47,7 @@ class MacroProcessor {
                         macro: macro.fullMatch,
                         error: result.error
                     });
-                    
+
                     // Replace with error message
                     const errorMsg = `\n\n⚠️ **Macro Error**: ${result.error}\n\n`;
                     processedContent =
@@ -64,7 +60,7 @@ class MacroProcessor {
                     macro: macro.fullMatch,
                     error: error.message
                 });
-                
+
                 const errorMsg = `\n\n⚠️ **Macro Error**: ${error.message}\n\n`;
                 processedContent =
                     processedContent.substring(0, macro.start) +
@@ -72,15 +68,14 @@ class MacroProcessor {
                     processedContent.substring(macro.end);
             }
         }
-        
+
-        console.log('MacroProcessor: Final processed content:', processedContent);
         return {
             success: errors.length === 0,
             content: processedContent,
             errors
         };
     }
-    
+
     /**
      * Process single macro
      */
@@ -98,20 +93,20 @@ class MacroProcessor {
                 };
             }
         }
-        
+
         if (!plugin) {
             return {
                 success: false,
                 error: `Unknown macro: !!${key}`
             };
         }
-        
+
         // Validate macro
         const validation = MacroParser.validateMacro(macro);
         if (!validation.valid) {
             return { success: false, error: validation.error };
         }
-        
+
         // Execute plugin
         try {
             return await plugin.process(macro, this.webdavClient);
@@ -122,7 +117,7 @@ class MacroProcessor {
             };
         }
     }
-    
+
     /**
      * Register default plugins
      */
@@ -131,14 +126,14 @@ class MacroProcessor {
         this.registerPlugin('core', 'include', {
             process: async (macro, webdavClient) => {
                 const path = macro.params.path || macro.params[''];
-                
+
                 if (!path) {
                     return {
                         success: false,
                         error: 'include macro requires "path" parameter'
                     };
                 }
-                
+
                 try {
                     // Add to include stack
                     this.includeStack.push(path);

static/js/notification-service.js

@@ -0,0 +1,77 @@
+/**
+ * Notification Service
+ * Provides a standardized way to show toast notifications
+ * Wraps the showNotification function from ui-utils.js
+ */
+
+class NotificationService {
+    /**
+     * Show a success notification
+     * @param {string} message - The message to display
+     */
+    static success(message) {
+        if (window.showNotification) {
+            window.showNotification(message, Config.NOTIFICATION_TYPES.SUCCESS);
+        } else {
+            Logger.warn('showNotification not available, falling back to console');
+            console.log(`✅ ${message}`);
+        }
+    }
+
+    /**
+     * Show an error notification
+     * @param {string} message - The message to display
+     */
+    static error(message) {
+        if (window.showNotification) {
+            window.showNotification(message, Config.NOTIFICATION_TYPES.ERROR);
+        } else {
+            Logger.warn('showNotification not available, falling back to console');
+            console.error(`❌ ${message}`);
+        }
+    }
+
+    /**
+     * Show a warning notification
+     * @param {string} message - The message to display
+     */
+    static warning(message) {
+        if (window.showNotification) {
+            window.showNotification(message, Config.NOTIFICATION_TYPES.WARNING);
+        } else {
+            Logger.warn('showNotification not available, falling back to console');
+            console.warn(`⚠️ ${message}`);
+        }
+    }
+
+    /**
+     * Show an info notification
+     * @param {string} message - The message to display
+     */
+    static info(message) {
+        if (window.showNotification) {
+            window.showNotification(message, Config.NOTIFICATION_TYPES.INFO);
+        } else {
+            Logger.warn('showNotification not available, falling back to console');
+            console.info(`ℹ️ ${message}`);
+        }
+    }
+
+    /**
+     * Show a notification with a custom type
+     * @param {string} message - The message to display
+     * @param {string} type - The notification type (success, danger, warning, primary, etc.)
+     */
+    static show(message, type = 'primary') {
+        if (window.showNotification) {
+            window.showNotification(message, type);
+        } else {
+            Logger.warn('showNotification not available, falling back to console');
+            console.log(`[${type.toUpperCase()}] ${message}`);
+        }
+    }
+}
+
+// Make NotificationService globally available
+window.NotificationService = NotificationService;
+

static/js/ui-utils.js

@@ -1,270 +1,60 @@
 /**
  * UI Utilities Module
- * Toast notifications, context menu, dark mode, file upload dialog
+ * Toast notifications (kept for backward compatibility)
+ *
+ * Other utilities have been moved to separate modules:
+ * - Context menu: context-menu.js
+ * - File upload: file-upload.js
+ * - Dark mode: dark-mode.js
+ * - Collection selector: collection-selector.js
+ * - Editor drop handler: editor-drop-handler.js
  */
 
 /**
  * Show toast notification
+ * @param {string} message - The message to display
+ * @param {string} type - The notification type (info, success, error, warning, danger, primary)
  */
 function showNotification(message, type = 'info') {
     const container = document.getElementById('toastContainer') || createToastContainer();
-    
+
     const toast = document.createElement('div');
     const bgClass = type === 'error' ? 'danger' : type === 'success' ? 'success' : type === 'warning' ? 'warning' : 'primary';
     toast.className = `toast align-items-center text-white bg-${bgClass} border-0`;
     toast.setAttribute('role', 'alert');
-    
+
     toast.innerHTML = `
         <div class="d-flex">
             <div class="toast-body">${message}</div>
             <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
         </div>
     `;
-    
+
     container.appendChild(toast);
-    
+
-    const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
+    const bsToast = new bootstrap.Toast(toast, { delay: Config.TOAST_DURATION });
     bsToast.show();
-    
+
     toast.addEventListener('hidden.bs.toast', () => {
         toast.remove();
     });
 }
 
+/**
+ * Create the toast container if it doesn't exist
+ * @returns {HTMLElement} The toast container element
+ */
 function createToastContainer() {
     const container = document.createElement('div');
     container.id = 'toastContainer';
     container.className = 'toast-container position-fixed top-0 end-0 p-3';
-    container.style.zIndex = '9999';
+    container.style.zIndex = Config.TOAST_Z_INDEX;
     document.body.appendChild(container);
     return container;
 }
 
-/**
+// All other UI utilities have been moved to separate modules
- * Enhanced Context Menu
+// See the module list at the top of this file
- */
-function showContextMenu(x, y, target) {
-    const menu = document.getElementById('contextMenu');
-    if (!menu) return;
-    
-    // Store target data
-    menu.dataset.targetPath = target.path;
-    menu.dataset.targetIsDir = target.isDir;
-    
-    // Show/hide menu items based on target type
-    const items = {
-        'new-file': target.isDir,
-        'new-folder': target.isDir,
-        'upload': target.isDir,
-        'download': true,
-        'paste': target.isDir && window.fileTreeActions?.clipboard,
-        'open': !target.isDir
-    };
-    
-    Object.entries(items).forEach(([action, show]) => {
-        const item = menu.querySelector(`[data-action="${action}"]`);
-        if (item) {
-            item.style.display = show ? 'flex' : 'none';
-        }
-    });
-    
-    // Position menu
-    menu.style.display = 'block';
-    menu.style.left = x + 'px';
-    menu.style.top = y + 'px';
-    
-    // Adjust if off-screen
-    setTimeout(() => {
-        const rect = menu.getBoundingClientRect();
-        if (rect.right > window.innerWidth) {
-            menu.style.left = (window.innerWidth - rect.width - 10) + 'px';
-        }
-        if (rect.bottom > window.innerHeight) {
-            menu.style.top = (window.innerHeight - rect.height - 10) + 'px';
-        }
-    }, 0);
-}
-
-function hideContextMenu() {
-    const menu = document.getElementById('contextMenu');
-    if (menu) {
-        menu.style.display = 'none';
-    }
-}
-
-// Combined click handler for context menu and outside clicks
-document.addEventListener('click', async (e) => {
-    const menuItem = e.target.closest('.context-menu-item');
-    
-    if (menuItem) {
-        // Handle context menu item click
-        const action = menuItem.dataset.action;
-        const menu = document.getElementById('contextMenu');
-        const targetPath = menu.dataset.targetPath;
-        const isDir = menu.dataset.targetIsDir === 'true';
-
-        hideContextMenu();
-
-        if (window.fileTreeActions) {
-            await window.fileTreeActions.execute(action, targetPath, isDir);
-        }
-    } else if (!e.target.closest('#contextMenu') && !e.target.closest('.tree-node')) {
-        // Hide on outside click
-        hideContextMenu();
-    }
-});
-
-/**
- * File Upload Dialog
- */
-function showFileUploadDialog(targetPath, onUpload) {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.multiple = true;
-    
-    input.addEventListener('change', async (e) => {
-        const files = Array.from(e.target.files);
-        if (files.length === 0) return;
-        
-        for (const file of files) {
-            try {
-                await onUpload(targetPath, file);
-            } catch (error) {
-                console.error('Upload failed:', error);
-            }
-        }
-    });
-    
-    input.click();
-}
-
-/**
- * Dark Mode Manager
- */
-class DarkMode {
-    constructor() {
-        this.isDark = localStorage.getItem('darkMode') === 'true';
-        this.apply();
-    }
-    
-    toggle() {
-        this.isDark = !this.isDark;
-        localStorage.setItem('darkMode', this.isDark);
-        this.apply();
-    }
-    
-    apply() {
-        if (this.isDark) {
-            document.body.classList.add('dark-mode');
-            const btn = document.getElementById('darkModeBtn');
-            if (btn) btn.textContent = '☀️';
-            
-            // Update mermaid theme
-            if (window.mermaid) {
-                mermaid.initialize({ theme: 'dark' });
-            }
-        } else {
-            document.body.classList.remove('dark-mode');
-            const btn = document.getElementById('darkModeBtn');
-            if (btn) btn.textContent = '🌙';
-            
-            // Update mermaid theme
-            if (window.mermaid) {
-                mermaid.initialize({ theme: 'default' });
-            }
-        }
-    }
-}
-
-/**
- * Collection Selector
- */
-class CollectionSelector {
-    constructor(selectId, webdavClient) {
-        this.select = document.getElementById(selectId);
-        this.webdavClient = webdavClient;
-        this.onChange = null;
-    }
-    
-    async load() {
-        try {
-            const collections = await this.webdavClient.getCollections();
-            this.select.innerHTML = '';
-            
-            collections.forEach(collection => {
-                const option = document.createElement('option');
-                option.value = collection;
-                option.textContent = collection;
-                this.select.appendChild(option);
-            });
-            
-            // Select first collection
-            if (collections.length > 0) {
-                this.select.value = collections[0];
-                this.webdavClient.setCollection(collections[0]);
-                if (this.onChange) {
-                    this.onChange(collections[0]);
-                }
-            }
-            
-            // Add change listener
-            this.select.addEventListener('change', () => {
-                const collection = this.select.value;
-                this.webdavClient.setCollection(collection);
-                if (this.onChange) {
-                    this.onChange(collection);
-                }
-            });
-        } catch (error) {
-            console.error('Failed to load collections:', error);
-            showNotification('Failed to load collections', 'error');
-        }
-    }
-}
-
-/**
- * Editor Drop Handler
- * Handles file drops into the editor
- */
-class EditorDropHandler {
-    constructor(editorElement, onFileDrop) {
-        this.editorElement = editorElement;
-        this.onFileDrop = onFileDrop;
-        this.setupHandlers();
-    }
-    
-    setupHandlers() {
-        this.editorElement.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.editorElement.classList.add('drag-over');
-        });
-        
-        this.editorElement.addEventListener('dragleave', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.editorElement.classList.remove('drag-over');
-        });
-        
-        this.editorElement.addEventListener('drop', async (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.editorElement.classList.remove('drag-over');
-            
-            const files = Array.from(e.dataTransfer.files);
-            if (files.length === 0) return;
-            
-            for (const file of files) {
-                try {
-                    if (this.onFileDrop) {
-                        await this.onFileDrop(file);
-                    }
-                } catch (error) {
-                    console.error('Drop failed:', error);
-                    showNotification(`Failed to upload ${file.name}`, 'error');
-                }
-            }
-        });
-    }
-}
 
+// Make showNotification globally available
+window.showNotification = showNotification;

static/js/utils.js

@@ -0,0 +1,355 @@
+/**
+ * Utilities Module
+ * Common utility functions used throughout the application
+ */
+
+/**
+ * Path Utilities
+ * Helper functions for path manipulation
+ */
+const PathUtils = {
+    /**
+     * Get the filename from a path
+     * @param {string} path - The file path
+     * @returns {string} The filename
+     * @example PathUtils.getFileName('folder/subfolder/file.md') // 'file.md'
+     */
+    getFileName(path) {
+        if (!path) return '';
+        return path.split('/').pop();
+    },
+
+    /**
+     * Get the parent directory path
+     * @param {string} path - The file path
+     * @returns {string} The parent directory path
+     * @example PathUtils.getParentPath('folder/subfolder/file.md') // 'folder/subfolder'
+     */
+    getParentPath(path) {
+        if (!path) return '';
+        const lastSlash = path.lastIndexOf('/');
+        return lastSlash === -1 ? '' : path.substring(0, lastSlash);
+    },
+
+    /**
+     * Normalize a path by removing duplicate slashes
+     * @param {string} path - The path to normalize
+     * @returns {string} The normalized path
+     * @example PathUtils.normalizePath('folder//subfolder///file.md') // 'folder/subfolder/file.md'
+     */
+    normalizePath(path) {
+        if (!path) return '';
+        return path.replace(/\/+/g, '/');
+    },
+
+    /**
+     * Join multiple path segments
+     * @param {...string} paths - Path segments to join
+     * @returns {string} The joined path
+     * @example PathUtils.joinPaths('folder', 'subfolder', 'file.md') // 'folder/subfolder/file.md'
+     */
+    joinPaths(...paths) {
+        return PathUtils.normalizePath(paths.filter(p => p).join('/'));
+    },
+
+    /**
+     * Get the file extension
+     * @param {string} path - The file path
+     * @returns {string} The file extension (without dot)
+     * @example PathUtils.getExtension('file.md') // 'md'
+     */
+    getExtension(path) {
+        if (!path) return '';
+        const fileName = PathUtils.getFileName(path);
+        const lastDot = fileName.lastIndexOf('.');
+        return lastDot === -1 ? '' : fileName.substring(lastDot + 1);
+    },
+
+    /**
+     * Check if a path is a descendant of another path
+     * @param {string} path - The path to check
+     * @param {string} ancestorPath - The potential ancestor path
+     * @returns {boolean} True if path is a descendant of ancestorPath
+     * @example PathUtils.isDescendant('folder/subfolder/file.md', 'folder') // true
+     */
+    isDescendant(path, ancestorPath) {
+        if (!path || !ancestorPath) return false;
+        return path.startsWith(ancestorPath + '/');
+    }
+};
+
+/**
+ * DOM Utilities
+ * Helper functions for DOM manipulation
+ */
+const DOMUtils = {
+    /**
+     * Create an element with optional class and attributes
+     * @param {string} tag - The HTML tag name
+     * @param {string} [className] - Optional class name(s)
+     * @param {Object} [attributes] - Optional attributes object
+     * @returns {HTMLElement} The created element
+     */
+    createElement(tag, className = '', attributes = {}) {
+        const element = document.createElement(tag);
+        if (className) {
+            element.className = className;
+        }
+        Object.entries(attributes).forEach(([key, value]) => {
+            element.setAttribute(key, value);
+        });
+        return element;
+    },
+
+    /**
+     * Remove all children from an element
+     * @param {HTMLElement} element - The element to clear
+     */
+    removeAllChildren(element) {
+        while (element.firstChild) {
+            element.removeChild(element.firstChild);
+        }
+    },
+
+    /**
+     * Toggle a class on an element
+     * @param {HTMLElement} element - The element
+     * @param {string} className - The class name
+     * @param {boolean} [force] - Optional force add/remove
+     */
+    toggleClass(element, className, force) {
+        if (force !== undefined) {
+            element.classList.toggle(className, force);
+        } else {
+            element.classList.toggle(className);
+        }
+    },
+
+    /**
+     * Query selector with error handling
+     * @param {string} selector - The CSS selector
+     * @param {HTMLElement} [parent] - Optional parent element
+     * @returns {HTMLElement|null} The found element or null
+     */
+    querySelector(selector, parent = document) {
+        try {
+            return parent.querySelector(selector);
+        } catch (error) {
+            Logger.error(`Invalid selector: ${selector}`, error);
+            return null;
+        }
+    },
+
+    /**
+     * Query selector all with error handling
+     * @param {string} selector - The CSS selector
+     * @param {HTMLElement} [parent] - Optional parent element
+     * @returns {NodeList|Array} The found elements or empty array
+     */
+    querySelectorAll(selector, parent = document) {
+        try {
+            return parent.querySelectorAll(selector);
+        } catch (error) {
+            Logger.error(`Invalid selector: ${selector}`, error);
+            return [];
+        }
+    }
+};
+
+/**
+ * Timing Utilities
+ * Helper functions for timing and throttling
+ */
+const TimingUtils = {
+    /**
+     * Debounce a function
+     * @param {Function} func - The function to debounce
+     * @param {number} wait - The wait time in milliseconds
+     * @returns {Function} The debounced function
+     */
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    },
+
+    /**
+     * Throttle a function
+     * @param {Function} func - The function to throttle
+     * @param {number} wait - The wait time in milliseconds
+     * @returns {Function} The throttled function
+     */
+    throttle(func, wait) {
+        let inThrottle;
+        return function executedFunction(...args) {
+            if (!inThrottle) {
+                func(...args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, wait);
+            }
+        };
+    },
+
+    /**
+     * Delay execution
+     * @param {number} ms - Milliseconds to delay
+     * @returns {Promise} Promise that resolves after delay
+     */
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+};
+
+/**
+ * Download Utilities
+ * Helper functions for file downloads
+ */
+const DownloadUtils = {
+    /**
+     * Trigger a download in the browser
+     * @param {string|Blob} content - The content to download
+     * @param {string} filename - The filename for the download
+     */
+    triggerDownload(content, filename) {
+        const blob = content instanceof Blob ? content : new Blob([content]);
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    },
+
+    /**
+     * Download content as a blob
+     * @param {Blob} blob - The blob to download
+     * @param {string} filename - The filename for the download
+     */
+    downloadAsBlob(blob, filename) {
+        DownloadUtils.triggerDownload(blob, filename);
+    }
+};
+
+/**
+ * Validation Utilities
+ * Helper functions for input validation
+ */
+const ValidationUtils = {
+    /**
+     * Validate and sanitize a filename
+     * @param {string} name - The filename to validate
+     * @param {boolean} [isFolder=false] - Whether this is a folder name
+     * @returns {Object} Validation result with {valid, sanitized, message}
+     */
+    validateFileName(name, isFolder = false) {
+        const type = isFolder ? 'folder' : 'file';
+
+        if (!name || name.trim().length === 0) {
+            return { valid: false, sanitized: '', message: `${type} name cannot be empty` };
+        }
+
+        // Check for invalid characters using pattern from Config
+        const validPattern = Config.FILENAME_PATTERN;
+
+        if (!validPattern.test(name)) {
+            const sanitized = ValidationUtils.sanitizeFileName(name);
+
+            return {
+                valid: false,
+                sanitized,
+                message: `Invalid characters in ${type} name. Only lowercase letters, numbers, and underscores allowed.\n\nSuggestion: "${sanitized}"`
+            };
+        }
+
+        return { valid: true, sanitized: name, message: '' };
+    },
+
+    /**
+     * Sanitize a filename by removing/replacing invalid characters
+     * @param {string} name - The filename to sanitize
+     * @returns {string} The sanitized filename
+     */
+    sanitizeFileName(name) {
+        return name
+            .toLowerCase()
+            .replace(Config.FILENAME_INVALID_CHARS, '_')
+            .replace(/_+/g, '_')
+            .replace(/^_+|_+$/g, '');
+    },
+
+    /**
+     * Check if a string is empty or whitespace
+     * @param {string} str - The string to check
+     * @returns {boolean} True if empty or whitespace
+     */
+    isEmpty(str) {
+        return !str || str.trim().length === 0;
+    },
+
+    /**
+     * Check if a value is a valid email
+     * @param {string} email - The email to validate
+     * @returns {boolean} True if valid email
+     */
+    isValidEmail(email) {
+        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailPattern.test(email);
+    }
+};
+
+/**
+ * String Utilities
+ * Helper functions for string manipulation
+ */
+const StringUtils = {
+    /**
+     * Truncate a string to a maximum length
+     * @param {string} str - The string to truncate
+     * @param {number} maxLength - Maximum length
+     * @param {string} [suffix='...'] - Suffix to add if truncated
+     * @returns {string} The truncated string
+     */
+    truncate(str, maxLength, suffix = '...') {
+        if (!str || str.length <= maxLength) return str;
+        return str.substring(0, maxLength - suffix.length) + suffix;
+    },
+
+    /**
+     * Capitalize the first letter of a string
+     * @param {string} str - The string to capitalize
+     * @returns {string} The capitalized string
+     */
+    capitalize(str) {
+        if (!str) return '';
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    },
+
+    /**
+     * Convert a string to kebab-case
+     * @param {string} str - The string to convert
+     * @returns {string} The kebab-case string
+     */
+    toKebabCase(str) {
+        return str
+            .replace(/([a-z])([A-Z])/g, '$1-$2')
+            .replace(/[\s_]+/g, '-')
+            .toLowerCase();
+    }
+};
+
+// Make utilities globally available
+window.PathUtils = PathUtils;
+window.DOMUtils = DOMUtils;
+window.TimingUtils = TimingUtils;
+window.DownloadUtils = DownloadUtils;
+window.ValidationUtils = ValidationUtils;
+window.StringUtils = StringUtils;
+

static/style.css

@@ -33,7 +33,8 @@ body.dark-mode {
 }
 
 /* Global styles */
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
     padding: 0;
@@ -48,12 +49,6 @@ body {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-.container-fluid {
-    flex: 1;
-    padding: 0;
-    overflow: hidden;
-}
-
 .row {
     margin: 0;
 }
@@ -206,7 +201,12 @@ body.dark-mode .CodeMirror-linenumber {
 }
 
 /* Markdown preview styles */
-#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 {
+#preview h1,
+#preview h2,
+#preview h3,
+#preview h4,
+#preview h5,
+#preview h6 {
     margin-top: 24px;
     margin-bottom: 16px;
     font-weight: 600;
@@ -286,7 +286,8 @@ body.dark-mode .CodeMirror-linenumber {
     margin-bottom: 16px;
 }
 
-#preview ul, #preview ol {
+#preview ul,
+#preview ol {
     margin-bottom: 16px;
     padding-left: 2em;
 }
@@ -378,7 +379,7 @@ body.dark-mode .mermaid svg {
     .sidebar {
         display: none;
     }
-    
+
     .editor-pane,
     .preview-pane {
         height: 50vh;
@@ -590,5 +591,4 @@ body.dark-mode .sidebar h6 {
 
 body.dark-mode .tree-children {
     border-left-color: var(--border-color);
-}
+}
-

templates/index.html

@@ -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-parser.js" defer></script>
-   <script src="/static/js/macro-processor.js" defer></script>
+    <script src="/static/js/macro-processor.js" defer></script>
 </body>
 
 </html>