...

static/js/app.js

@@ -0,0 +1,302 @@
+/**
+ * Main Application
+ * Coordinates all modules and handles user interactions
+ */
+
+// Global state
+let webdavClient;
+let fileTree;
+let editor;
+let darkMode;
+let collectionSelector;
+let clipboard = null;
+let currentFilePath = null;
+
+// Initialize application
+document.addEventListener('DOMContentLoaded', async () => {
+    // Initialize WebDAV client
+    webdavClient = new WebDAVClient('/fs/');
+    
+    // Initialize dark mode
+    darkMode = new DarkMode();
+    document.getElementById('darkModeBtn').addEventListener('click', () => {
+        darkMode.toggle();
+    });
+    
+    // Initialize collection selector
+    collectionSelector = new CollectionSelector('collectionSelect', webdavClient);
+    collectionSelector.onChange = async (collection) => {
+        await fileTree.load();
+    };
+    await collectionSelector.load();
+    
+    // Initialize file tree
+    fileTree = new FileTree('fileTree', webdavClient);
+    fileTree.onFileSelect = async (item) => {
+        await loadFile(item.path);
+    };
+    await fileTree.load();
+    
+    // Initialize editor
+    editor = new MarkdownEditor('editor', 'preview');
+    
+    // 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', () => {
+        newFile();
+    });
+    
+    document.getElementById('saveBtn').addEventListener('click', async () => {
+        await saveFile();
+    });
+    
+    document.getElementById('deleteBtn').addEventListener('click', async () => {
+        await deleteCurrentFile();
+    });
+    
+    // Setup context menu handlers
+    setupContextMenuHandlers();
+    
+    // Initialize mermaid
+    mermaid.initialize({ startOnLoad: true, theme: darkMode.isDark ? 'dark' : 'default' });
+});
+
+/**
+ * File Operations
+ */
+async function loadFile(path) {
+    try {
+        const content = await webdavClient.get(path);
+        editor.setValue(content);
+        document.getElementById('filenameInput').value = path;
+        currentFilePath = path;
+        showNotification('File loaded', 'success');
+    } catch (error) {
+        console.error('Failed to load file:', error);
+        showNotification('Failed to load file', 'error');
+    }
+}
+
+function newFile() {
+    editor.setValue('# New File\n\nStart typing...\n');
+    document.getElementById('filenameInput').value = '';
+    document.getElementById('filenameInput').focus();
+    currentFilePath = null;
+    showNotification('New file', 'info');
+}
+
+async function saveFile() {
+    const filename = document.getElementById('filenameInput').value.trim();
+    if (!filename) {
+        showNotification('Please enter a filename', 'warning');
+        return;
+    }
+    
+    try {
+        const content = editor.getValue();
+        await webdavClient.put(filename, content);
+        currentFilePath = filename;
+        await fileTree.load();
+        showNotification('Saved', 'success');
+    } catch (error) {
+        console.error('Failed to save file:', error);
+        showNotification('Failed to save file', 'error');
+    }
+}
+
+async function deleteCurrentFile() {
+    if (!currentFilePath) {
+        showNotification('No file selected', 'warning');
+        return;
+    }
+    
+    if (!confirm(`Delete ${currentFilePath}?`)) {
+        return;
+    }
+    
+    try {
+        await webdavClient.delete(currentFilePath);
+        await fileTree.load();
+        newFile();
+        showNotification('Deleted', 'success');
+    } catch (error) {
+        console.error('Failed to delete file:', error);
+        showNotification('Failed to delete file', 'error');
+    }
+}
+
+/**
+ * Context Menu Handlers
+ */
+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 handleContextAction(action, targetPath, isDir);
+    });
+}
+
+async function handleContextAction(action, targetPath, isDir) {
+    switch (action) {
+        case 'open':
+            if (!isDir) {
+                await loadFile(targetPath);
+            }
+            break;
+            
+        case 'new-file':
+            if (isDir) {
+                const filename = prompt('Enter filename:');
+                if (filename) {
+                    await fileTree.createFile(targetPath, filename);
+                }
+            }
+            break;
+            
+        case 'new-folder':
+            if (isDir) {
+                const foldername = prompt('Enter folder name:');
+                if (foldername) {
+                    await fileTree.createFolder(targetPath, foldername);
+                }
+            }
+            break;
+            
+        case 'upload':
+            if (isDir) {
+                showFileUploadDialog(targetPath, async (path, file) => {
+                    await fileTree.uploadFile(path, file);
+                });
+            }
+            break;
+            
+        case 'download':
+            if (isDir) {
+                await fileTree.downloadFolder(targetPath);
+            } else {
+                await fileTree.downloadFile(targetPath);
+            }
+            break;
+            
+        case 'rename':
+            const newName = prompt('Enter new name:', targetPath.split('/').pop());
+            if (newName) {
+                const parentPath = targetPath.split('/').slice(0, -1).join('/');
+                const newPath = parentPath ? `${parentPath}/${newName}` : newName;
+                try {
+                    await webdavClient.move(targetPath, newPath);
+                    await fileTree.load();
+                    showNotification('Renamed', 'success');
+                } catch (error) {
+                    console.error('Failed to rename:', error);
+                    showNotification('Failed to rename', 'error');
+                }
+            }
+            break;
+            
+        case 'copy':
+            clipboard = { path: targetPath, operation: 'copy' };
+            showNotification('Copied to clipboard', 'info');
+            updatePasteVisibility();
+            break;
+            
+        case 'cut':
+            clipboard = { path: targetPath, operation: 'cut' };
+            showNotification('Cut to clipboard', 'info');
+            updatePasteVisibility();
+            break;
+            
+        case 'paste':
+            if (clipboard && isDir) {
+                const filename = clipboard.path.split('/').pop();
+                const destPath = `${targetPath}/${filename}`;
+                
+                try {
+                    if (clipboard.operation === 'copy') {
+                        await webdavClient.copy(clipboard.path, destPath);
+                        showNotification('Copied', 'success');
+                    } else {
+                        await webdavClient.move(clipboard.path, destPath);
+                        showNotification('Moved', 'success');
+                        clipboard = null;
+                        updatePasteVisibility();
+                    }
+                    await fileTree.load();
+                } catch (error) {
+                    console.error('Failed to paste:', error);
+                    showNotification('Failed to paste', 'error');
+                }
+            }
+            break;
+            
+        case 'delete':
+            if (confirm(`Delete ${targetPath}?`)) {
+                try {
+                    await webdavClient.delete(targetPath);
+                    await fileTree.load();
+                    showNotification('Deleted', 'success');
+                } catch (error) {
+                    console.error('Failed to delete:', error);
+                    showNotification('Failed to delete', 'error');
+                }
+            }
+            break;
+    }
+}
+
+function updatePasteVisibility() {
+    const pasteItem = document.getElementById('pasteMenuItem');
+    if (pasteItem) {
+        pasteItem.style.display = clipboard ? 'block' : 'none';
+    }
+}
+
+/**
+ * Editor File Drop Handler
+ */
+async function handleEditorFileDrop(file) {
+    try {
+        // Get current file's directory
+        let targetDir = '';
+        if (currentFilePath) {
+            const parts = currentFilePath.split('/');
+            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 
+            ? `![${file.name}](/${webdavClient.currentCollection}/${uploadedPath})`
+            : `[${file.name}](/${webdavClient.currentCollection}/${uploadedPath})`;
+        
+        editor.insertAtCursor(link);
+        showNotification(`Uploaded and inserted link`, 'success');
+    } catch (error) {
+        console.error('Failed to handle file drop:', error);
+        showNotification('Failed to upload file', 'error');
+    }
+}
+
+// Make showContextMenu global
+window.showContextMenu = showContextMenu;
+

static/js/editor.js

@@ -0,0 +1,273 @@
+/**
+ * Editor Module
+ * Handles CodeMirror editor and markdown preview
+ */
+
+class MarkdownEditor {
+    constructor(editorId, previewId, filenameInputId) {
+        this.editorElement = document.getElementById(editorId);
+        this.previewElement = document.getElementById(previewId);
+        this.filenameInput = document.getElementById(filenameInputId);
+        this.currentFile = null;
+        this.webdavClient = null;
+        
+        this.initCodeMirror();
+        this.initMarkdown();
+        this.initMermaid();
+    }
+
+    /**
+     * Initialize CodeMirror
+     */
+    initCodeMirror() {
+        this.editor = CodeMirror(this.editorElement, {
+            mode: 'markdown',
+            theme: 'monokai',
+            lineNumbers: true,
+            lineWrapping: true,
+            autofocus: true,
+            extraKeys: {
+                'Ctrl-S': () => this.save(),
+                'Cmd-S': () => this.save()
+            }
+        });
+
+        // Update preview on change
+        this.editor.on('change', () => {
+            this.updatePreview();
+        });
+
+        // Sync scroll
+        this.editor.on('scroll', () => {
+            this.syncScroll();
+        });
+    }
+
+    /**
+     * Initialize markdown parser
+     */
+    initMarkdown() {
+        this.marked = window.marked;
+        this.marked.setOptions({
+            breaks: true,
+            gfm: true,
+            highlight: (code, lang) => {
+                if (lang && window.Prism.languages[lang]) {
+                    return window.Prism.highlight(code, window.Prism.languages[lang], lang);
+                }
+                return code;
+            }
+        });
+    }
+
+    /**
+     * Initialize Mermaid
+     */
+    initMermaid() {
+        if (window.mermaid) {
+            window.mermaid.initialize({
+                startOnLoad: false,
+                theme: document.body.classList.contains('dark-mode') ? 'dark' : 'default'
+            });
+        }
+    }
+
+    /**
+     * Set WebDAV client
+     */
+    setWebDAVClient(client) {
+        this.webdavClient = client;
+    }
+
+    /**
+     * Load file
+     */
+    async loadFile(path) {
+        try {
+            const content = await this.webdavClient.get(path);
+            this.currentFile = path;
+            this.filenameInput.value = path;
+            this.editor.setValue(content);
+            this.updatePreview();
+            
+            if (window.showNotification) {
+                window.showNotification(`Loaded ${path}`, 'info');
+            }
+        } catch (error) {
+            console.error('Failed to load file:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to load file', 'danger');
+            }
+        }
+    }
+
+    /**
+     * Save file
+     */
+    async save() {
+        const path = this.filenameInput.value.trim();
+        if (!path) {
+            if (window.showNotification) {
+                window.showNotification('Please enter a filename', 'warning');
+            }
+            return;
+        }
+
+        const content = this.editor.getValue();
+
+        try {
+            await this.webdavClient.put(path, content);
+            this.currentFile = path;
+            
+            if (window.showNotification) {
+                window.showNotification('✅ Saved', 'success');
+            }
+
+            // Trigger file tree reload
+            if (window.fileTree) {
+                await window.fileTree.load();
+                window.fileTree.selectNode(path);
+            }
+        } catch (error) {
+            console.error('Failed to save file:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to save file', 'danger');
+            }
+        }
+    }
+
+    /**
+     * Create new file
+     */
+    newFile() {
+        this.currentFile = null;
+        this.filenameInput.value = '';
+        this.filenameInput.focus();
+        this.editor.setValue('');
+        this.updatePreview();
+
+        if (window.showNotification) {
+            window.showNotification('Enter filename and start typing', 'info');
+        }
+    }
+
+    /**
+     * Delete current file
+     */
+    async deleteFile() {
+        if (!this.currentFile) {
+            if (window.showNotification) {
+                window.showNotification('No file selected', 'warning');
+            }
+            return;
+        }
+
+        if (!confirm(`Delete ${this.currentFile}?`)) {
+            return;
+        }
+
+        try {
+            await this.webdavClient.delete(this.currentFile);
+            
+            if (window.showNotification) {
+                window.showNotification(`Deleted ${this.currentFile}`, 'success');
+            }
+
+            this.newFile();
+
+            // Trigger file tree reload
+            if (window.fileTree) {
+                await window.fileTree.load();
+            }
+        } catch (error) {
+            console.error('Failed to delete file:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to delete file', 'danger');
+            }
+        }
+    }
+
+    /**
+     * Update preview
+     */
+    updatePreview() {
+        const markdown = this.editor.getValue();
+        let html = this.marked.parse(markdown);
+
+        // Process mermaid diagrams
+        html = html.replace(/<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g, (match, code) => {
+            const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
+            return `<div class="mermaid" id="${id}">${code}</div>`;
+        });
+
+        this.previewElement.innerHTML = html;
+
+        // Render mermaid diagrams
+        if (window.mermaid) {
+            window.mermaid.init(undefined, this.previewElement.querySelectorAll('.mermaid'));
+        }
+
+        // Highlight code blocks
+        if (window.Prism) {
+            window.Prism.highlightAllUnder(this.previewElement);
+        }
+    }
+
+    /**
+     * Sync scroll between editor and preview
+     */
+    syncScroll() {
+        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;
+    }
+
+    /**
+     * Handle image upload
+     */
+    async uploadImage(file) {
+        try {
+            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');
+            }
+        } catch (error) {
+            console.error('Failed to upload image:', error);
+            if (window.showNotification) {
+                window.showNotification('Failed to upload image', 'danger');
+            }
+        }
+    }
+
+    /**
+     * Get editor content
+     */
+    getValue() {
+        return this.editor.getValue();
+    }
+    
+    insertAtCursor(text) {
+        const doc = this.editor.getDoc();
+        const cursor = doc.getCursor();
+        doc.replaceRange(text, cursor);
+    }
+
+    /**
+     * Set editor content
+     */
+    setValue(content) {
+        this.editor.setValue(content);
+    }
+}
+
+// Export for use in other modules
+window.MarkdownEditor = MarkdownEditor;
+

static/js/file-tree.js

@@ -0,0 +1,290 @@
+/**
+ * File Tree Component
+ * Manages the hierarchical file tree display and interactions
+ */
+
+class FileTree {
+    constructor(containerId, webdavClient) {
+        this.container = document.getElementById(containerId);
+        this.webdavClient = webdavClient;
+        this.tree = [];
+        this.selectedPath = null;
+        this.onFileSelect = null;
+        this.onFolderSelect = null;
+        
+        this.setupEventListeners();
+    }
+    
+    setupEventListeners() {
+        // Click handler for tree nodes
+        this.container.addEventListener('click', (e) => {
+            const node = e.target.closest('.tree-node');
+            if (!node) return;
+            
+            const path = node.dataset.path;
+            const isDir = node.dataset.isdir === 'true';
+            
+            // Toggle folder
+            if (e.target.closest('.tree-toggle')) {
+                this.toggleFolder(node);
+                return;
+            }
+            
+            // Select node
+            if (isDir) {
+                this.selectFolder(path);
+            } else {
+                this.selectFile(path);
+            }
+        });
+        
+        // Context menu
+        this.container.addEventListener('contextmenu', (e) => {
+            const node = e.target.closest('.tree-node');
+            if (!node) return;
+            
+            e.preventDefault();
+            const path = node.dataset.path;
+            const isDir = node.dataset.isdir === 'true';
+            
+            window.showContextMenu(e.clientX, e.clientY, { path, isDir });
+        });
+    }
+    
+    async load() {
+        try {
+            const items = await this.webdavClient.propfind('', 'infinity');
+            this.tree = this.webdavClient.buildTree(items);
+            this.render();
+        } catch (error) {
+            console.error('Failed to load file tree:', error);
+            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 nodeElement = this.createNodeElement(node, level);
+            parentElement.appendChild(nodeElement);
+            
+            if (node.children && node.children.length > 0) {
+                const childContainer = document.createElement('div');
+                childContainer.className = 'tree-children';
+                childContainer.style.display = 'none';
+                nodeElement.appendChild(childContainer);
+                this.renderNodes(node.children, childContainer, level + 1);
+            }
+        });
+    }
+    
+    createNodeElement(node, level) {
+        const div = document.createElement('div');
+        div.className = 'tree-node';
+        div.dataset.path = node.path;
+        div.dataset.isdir = node.isDirectory;
+        div.style.paddingLeft = `${level * 20 + 10}px`;
+        
+        // Toggle arrow for folders
+        if (node.isDirectory) {
+            const toggle = document.createElement('span');
+            toggle.className = 'tree-toggle';
+            toggle.innerHTML = '<i class="bi bi-chevron-right"></i>';
+            div.appendChild(toggle);
+        } else {
+            const spacer = document.createElement('span');
+            spacer.className = 'tree-spacer';
+            spacer.style.width = '16px';
+            spacer.style.display = 'inline-block';
+            div.appendChild(spacer);
+        }
+        
+        // Icon
+        const icon = document.createElement('i');
+        if (node.isDirectory) {
+            icon.className = 'bi bi-folder-fill';
+            icon.style.color = '#dcb67a';
+        } else {
+            icon.className = 'bi bi-file-earmark-text';
+            icon.style.color = '#6a9fb5';
+        }
+        div.appendChild(icon);
+        
+        // Name
+        const name = document.createElement('span');
+        name.className = 'tree-name';
+        name.textContent = node.name;
+        div.appendChild(name);
+        
+        // Size for files
+        if (!node.isDirectory && node.size) {
+            const size = document.createElement('span');
+            size.className = 'tree-size';
+            size.textContent = this.formatSize(node.size);
+            div.appendChild(size);
+        }
+        
+        return div;
+    }
+    
+    toggleFolder(nodeElement) {
+        const childContainer = nodeElement.querySelector('.tree-children');
+        if (!childContainer) return;
+        
+        const toggle = nodeElement.querySelector('.tree-toggle i');
+        const isExpanded = childContainer.style.display !== 'none';
+        
+        if (isExpanded) {
+            childContainer.style.display = 'none';
+            toggle.className = 'bi bi-chevron-right';
+        } else {
+            childContainer.style.display = 'block';
+            toggle.className = 'bi bi-chevron-down';
+        }
+    }
+    
+    selectFile(path) {
+        this.selectedPath = path;
+        this.updateSelection();
+        if (this.onFileSelect) {
+            this.onFileSelect({ path, isDirectory: false });
+        }
+    }
+    
+    selectFolder(path) {
+        this.selectedPath = path;
+        this.updateSelection();
+        if (this.onFolderSelect) {
+            this.onFolderSelect({ path, isDirectory: true });
+        }
+    }
+    
+    updateSelection() {
+        // Remove previous selection
+        this.container.querySelectorAll('.tree-node').forEach(node => {
+            node.classList.remove('selected');
+        });
+        
+        // Add selection to current
+        if (this.selectedPath) {
+            const node = this.container.querySelector(`[data-path="${this.selectedPath}"]`);
+            if (node) {
+                node.classList.add('selected');
+            }
+        }
+    }
+    
+    formatSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i) * 10) / 10 + ' ' + sizes[i];
+    }
+    
+    async createFile(parentPath, filename) {
+        try {
+            const fullPath = parentPath ? `${parentPath}/${filename}` : filename;
+            await this.webdavClient.put(fullPath, '# New File\n\nStart typing...\n');
+            await this.load();
+            showNotification('File created', 'success');
+            return fullPath;
+        } catch (error) {
+            console.error('Failed to create file:', error);
+            showNotification('Failed to create file', 'error');
+            throw error;
+        }
+    }
+    
+    async createFolder(parentPath, foldername) {
+        try {
+            const fullPath = parentPath ? `${parentPath}/${foldername}` : foldername;
+            await this.webdavClient.mkcol(fullPath);
+            await this.load();
+            showNotification('Folder created', 'success');
+            return fullPath;
+        } catch (error) {
+            console.error('Failed to create folder:', error);
+            showNotification('Failed to create folder', 'error');
+            throw error;
+        }
+    }
+    
+    async uploadFile(parentPath, file) {
+        try {
+            const fullPath = parentPath ? `${parentPath}/${file.name}` : file.name;
+            const content = await file.arrayBuffer();
+            await this.webdavClient.putBinary(fullPath, content);
+            await this.load();
+            showNotification(`Uploaded ${file.name}`, 'success');
+            return fullPath;
+        } catch (error) {
+            console.error('Failed to upload file:', error);
+            showNotification('Failed to upload file', 'error');
+            throw error;
+        }
+    }
+    
+    async downloadFile(path) {
+        try {
+            const content = await this.webdavClient.get(path);
+            const filename = path.split('/').pop();
+            this.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');
+            
+            // 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`;
+            this.triggerDownload(zipBlob, zipFilename);
+            showNotification('Downloaded', 'success');
+        } catch (error) {
+            console.error('Failed to download folder:', error);
+            showNotification('Failed to download folder', 'error');
+        }
+    }
+    
+    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);
+    }
+}
+

static/js/ui-utils.js

@@ -0,0 +1,256 @@
+/**
+ * UI Utilities Module
+ * Toast notifications, context menu, dark mode, file upload dialog
+ */
+
+/**
+ * Show toast notification
+ */
+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 });
+    bsToast.show();
+    
+    toast.addEventListener('hidden.bs.toast', () => {
+        toast.remove();
+    });
+}
+
+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';
+    document.body.appendChild(container);
+    return container;
+}
+
+/**
+ * Enhanced Context Menu
+ */
+function showContextMenu(x, y, target) {
+    const menu = document.getElementById('contextMenu');
+    if (!menu) return;
+    
+    // Store target
+    menu.dataset.targetPath = target.path;
+    menu.dataset.targetIsDir = target.isDir;
+    
+    // Show/hide menu items based on target type
+    const newFileItem = menu.querySelector('[data-action="new-file"]');
+    const newFolderItem = menu.querySelector('[data-action="new-folder"]');
+    const uploadItem = menu.querySelector('[data-action="upload"]');
+    const downloadItem = menu.querySelector('[data-action="download"]');
+    
+    if (target.isDir) {
+        // Folder context menu
+        if (newFileItem) newFileItem.style.display = 'block';
+        if (newFolderItem) newFolderItem.style.display = 'block';
+        if (uploadItem) uploadItem.style.display = 'block';
+        if (downloadItem) downloadItem.style.display = 'block';
+    } else {
+        // File context menu
+        if (newFileItem) newFileItem.style.display = 'none';
+        if (newFolderItem) newFolderItem.style.display = 'none';
+        if (uploadItem) uploadItem.style.display = 'none';
+        if (downloadItem) downloadItem.style.display = 'block';
+    }
+    
+    // Position menu
+    menu.style.display = 'block';
+    menu.style.left = x + 'px';
+    menu.style.top = y + 'px';
+    
+    // Adjust if off-screen
+    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';
+    }
+}
+
+function hideContextMenu() {
+    const menu = document.getElementById('contextMenu');
+    if (menu) {
+        menu.style.display = 'none';
+    }
+}
+
+// Hide context menu on click outside
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('#contextMenu')) {
+        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');
+                }
+            }
+        });
+    }
+}
+

static/js/webdav-client.js

@@ -0,0 +1,239 @@
+/**
+ * WebDAV Client
+ * Handles all WebDAV protocol operations
+ */
+
+class WebDAVClient {
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
+        this.currentCollection = null;
+    }
+    
+    setCollection(collection) {
+        this.currentCollection = collection;
+    }
+    
+    getFullUrl(path) {
+        if (!this.currentCollection) {
+            throw new Error('No collection selected');
+        }
+        const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+        return `${this.baseUrl}${this.currentCollection}/${cleanPath}`;
+    }
+    
+    async getCollections() {
+        const response = await fetch(this.baseUrl);
+        if (!response.ok) {
+            throw new Error('Failed to get collections');
+        }
+        return await response.json();
+    }
+    
+    async propfind(path = '', depth = '1') {
+        const url = this.getFullUrl(path);
+        const response = await fetch(url, {
+            method: 'PROPFIND',
+            headers: {
+                'Depth': depth,
+                'Content-Type': 'application/xml'
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error(`PROPFIND failed: ${response.statusText}`);
+        }
+        
+        const xml = await response.text();
+        return this.parseMultiStatus(xml);
+    }
+    
+    async get(path) {
+        const url = this.getFullUrl(path);
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+            throw new Error(`GET failed: ${response.statusText}`);
+        }
+        
+        return await response.text();
+    }
+    
+    async getBinary(path) {
+        const url = this.getFullUrl(path);
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+            throw new Error(`GET failed: ${response.statusText}`);
+        }
+        
+        return await response.blob();
+    }
+    
+    async put(path, content) {
+        const url = this.getFullUrl(path);
+        const response = await fetch(url, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'text/plain'
+            },
+            body: content
+        });
+        
+        if (!response.ok) {
+            throw new Error(`PUT failed: ${response.statusText}`);
+        }
+        
+        return true;
+    }
+    
+    async putBinary(path, content) {
+        const url = this.getFullUrl(path);
+        const response = await fetch(url, {
+            method: 'PUT',
+            body: content
+        });
+        
+        if (!response.ok) {
+            throw new Error(`PUT failed: ${response.statusText}`);
+        }
+        
+        return true;
+    }
+    
+    async delete(path) {
+        const url = this.getFullUrl(path);
+        const response = await fetch(url, {
+            method: 'DELETE'
+        });
+        
+        if (!response.ok) {
+            throw new Error(`DELETE failed: ${response.statusText}`);
+        }
+        
+        return true;
+    }
+    
+    async copy(sourcePath, destPath) {
+        const sourceUrl = this.getFullUrl(sourcePath);
+        const destUrl = this.getFullUrl(destPath);
+        
+        const response = await fetch(sourceUrl, {
+            method: 'COPY',
+            headers: {
+                'Destination': destUrl
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error(`COPY failed: ${response.statusText}`);
+        }
+        
+        return true;
+    }
+    
+    async move(sourcePath, destPath) {
+        const sourceUrl = this.getFullUrl(sourcePath);
+        const destUrl = this.getFullUrl(destPath);
+        
+        const response = await fetch(sourceUrl, {
+            method: 'MOVE',
+            headers: {
+                'Destination': destUrl
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error(`MOVE failed: ${response.statusText}`);
+        }
+        
+        return true;
+    }
+    
+    async mkcol(path) {
+        const url = this.getFullUrl(path);
+        const response = await fetch(url, {
+            method: 'MKCOL'
+        });
+        
+        if (!response.ok && response.status !== 405) { // 405 means already exists
+            throw new Error(`MKCOL failed: ${response.statusText}`);
+        }
+        
+        return true;
+    }
+    
+    parseMultiStatus(xml) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(xml, 'text/xml');
+        const responses = doc.getElementsByTagNameNS('DAV:', 'response');
+        
+        const items = [];
+        for (let i = 0; i < responses.length; i++) {
+            const response = responses[i];
+            const href = response.getElementsByTagNameNS('DAV:', 'href')[0].textContent;
+            const propstat = response.getElementsByTagNameNS('DAV:', 'propstat')[0];
+            const prop = propstat.getElementsByTagNameNS('DAV:', 'prop')[0];
+            
+            // Check if it's a collection (directory)
+            const resourcetype = prop.getElementsByTagNameNS('DAV:', 'resourcetype')[0];
+            const isDirectory = resourcetype.getElementsByTagNameNS('DAV:', 'collection').length > 0;
+            
+            // Get size
+            const contentlengthEl = prop.getElementsByTagNameNS('DAV:', 'getcontentlength')[0];
+            const size = contentlengthEl ? parseInt(contentlengthEl.textContent) : 0;
+            
+            // Extract path relative to collection
+            const pathParts = href.split(`/${this.currentCollection}/`);
+            const relativePath = pathParts.length > 1 ? pathParts[1] : '';
+            
+            // Skip the collection root itself
+            if (!relativePath) continue;
+            
+            // Remove trailing slash from directories
+            const cleanPath = relativePath.endsWith('/') ? relativePath.slice(0, -1) : relativePath;
+            
+            items.push({
+                path: cleanPath,
+                name: cleanPath.split('/').pop(),
+                isDirectory,
+                size
+            });
+        }
+        
+        return items;
+    }
+    
+    buildTree(items) {
+        const root = [];
+        const map = {};
+        
+        // Sort items by path depth and name
+        items.sort((a, b) => {
+            const depthA = a.path.split('/').length;
+            const depthB = b.path.split('/').length;
+            if (depthA !== depthB) return depthA - depthB;
+            return a.path.localeCompare(b.path);
+        });
+        
+        items.forEach(item => {
+            const parts = item.path.split('/');
+            const parentPath = parts.slice(0, -1).join('/');
+            
+            const node = {
+                ...item,
+                children: []
+            };
+            
+            map[item.path] = node;
+            
+            if (parentPath && map[parentPath]) {
+                map[parentPath].children.push(node);
+            } else {
+                root.push(node);
+            }
+        });
+        
+        return root;
+    }
+}
+