@joinezco/codeblock 0.0.8 → 0.0.9

package/dist/panels/toolbar.js

@@ -1,12 +1,39 @@
 import { StateEffect, StateField } from "@codemirror/state";
-import { CodeblockFacet, openFileEffect, currentFileField } from "../editor";
+import { CodeblockFacet, openFileEffect, currentFileField, setThemeEffect } from "../editor";
 import { extOrLanguageToLanguageId } from "../lsps";
+import { LSP, LspLog, FileChangeType } from "../utils/lsp";
+import { Seti } from "@m234/nerd-fonts/fs";
+import { settingsField, resolveThemeDark, createSettingsOverlay } from "./footer";
+// Browser-safe file icon lookup (avoids node:path.parse used by Seti.fromPath)
+const FALLBACK_ICON = { value: '\ue64e', hexCode: 0xe64e }; // nf-seti-text
+function setiIconForPath(filePath) {
+    const base = filePath.split('/').pop() || filePath;
+    // Check exact basename match first (e.g. Dockerfile, Makefile)
+    const byBase = Seti.byBaseSeti.get(base);
+    if (byBase)
+        return byBase;
+    // Walk extensions from longest to shortest (e.g. .spec.ts → .ts)
+    let dot = base.indexOf('.');
+    if (dot < 0)
+        return FALLBACK_ICON;
+    let ext = base.slice(dot);
+    for (;;) {
+        const byExt = Seti.byExtensionSeti.get(ext);
+        if (byExt)
+            return byExt;
+        dot = ext.indexOf('.', 1);
+        if (dot === -1)
+            break;
+        ext = ext.slice(dot);
+    }
+    return FALLBACK_ICON;
+}
 // Type guards
 function isCommandResult(result) {
-    return 'type' in result;
+    return 'type' in result && result.query !== undefined;
 }
-function isSearchResult(result) {
-    return 'score' in result;
+function isBrowseEntry(result) {
+    return 'type' in result && ('fullPath' in result);
 }
 // Search results state - now handles both commands and search results
 export const setSearchResults = StateEffect.define();
@@ -40,89 +67,21 @@ function isValidProgrammingLanguage(query) {
     return Object.keys(extOrLanguageToLanguageId).some(key => key.toLowerCase() === lowerQuery ||
         extOrLanguageToLanguageId[key].toLowerCase() === lowerQuery);
 }
-// Get appropriate icon for language/extension
+// Icons
+const SEARCH_ICON = '\uf002'; // nf-fa-search (magnifying glass)
+const DEFAULT_FILE_ICON = '\ue64e'; // nf-seti-text
+const COG_ICON = '\uf013'; // nf-fa-cog
+const FOLDER_ICON = '\ue613'; // nf-seti-folder
+const FOLDER_OPEN_ICON = '\ue614'; // nf-seti-folder (open variant)
+const PARENT_DIR_ICON = '\uf112'; // nf-fa-reply (back/up arrow)
+// Get nerd font icon for a file path
+function getFileIcon(path) {
+    const result = setiIconForPath(path);
+    return { glyph: result.value, color: result.color || '' };
+}
+// Get icon for a language/extension query (used for create-file commands)
 function getLanguageIcon(query) {
-    const lowerQuery = query.toLowerCase();
-    // Language/extension icons matching extOrLanguageToLanguageId
-    const iconMap = {
-        // JavaScript/TypeScript family
-        'javascript': '🟨',
-        'js': '🟨',
-        'typescript': '🔷',
-        'ts': '🔷',
-        'jsx': '⚛️',
-        'tsx': '⚛️',
-        // Python
-        'python': '🐍',
-        'py': '🐍',
-        // Ruby
-        'ruby': '💎',
-        'rb': '💎',
-        // PHP
-        'php': '🐘',
-        // Java
-        'java': '☕',
-        // C/C++
-        'cpp': '⚙️',
-        'c': '⚙️',
-        // C#
-        'csharp': '🔷',
-        'cs': '🔷',
-        // Go
-        'go': '🐹',
-        // Swift
-        'swift': '🦉',
-        // Kotlin
-        'kotlin': '🟣',
-        'kt': '🟣',
-        // Rust
-        'rust': '🦀',
-        'rs': '🦀',
-        // Scala
-        'scala': '🔴',
-        // Visual Basic
-        'vb': '🔵',
-        // Haskell
-        'haskell': '🎭',
-        'hs': '🎭',
-        // Lua
-        'lua': '🌙',
-        // Perl
-        'perl': '🐪',
-        'pl': '🐪',
-        // Shell/Bash
-        'bash': '🐚',
-        'shell': '🐚',
-        'sh': '🐚',
-        'zsh': '🐚',
-        // SQL
-        'mysql': '🗃️',
-        'sql': '🗃️',
-        // Web technologies
-        'html': '🌐',
-        'css': '🎨',
-        'scss': '🎨',
-        'less': '🎨',
-        // Data formats
-        'json': '📋',
-        'yaml': '⚙️',
-        'yml': '⚙️',
-        'xml': '📄',
-        'toml': '⚙️',
-        'ini': '⚙️',
-        'conf': '⚙️',
-        'log': '📄',
-        'env': '🔧',
-        // Documentation
-        'markdown': '📝',
-        'md': '📝',
-        // Docker/Build
-        'dockerfile': '🐳',
-        'makefile': '🔨',
-        'dockerignore': '🐳',
-        'gitignore': '📝'
-    };
-    return iconMap[lowerQuery] || '📄';
+    return getFileIcon(`file.${query}`);
 }
 // Create command results for the first section
 function createCommandResults(query, view, searchResults) {
@@ -136,10 +95,12 @@ function createCommandResults(query, view, searchResults) {
     if (query.trim()) {
         // Create new file command (only if query doesn't match existing file)
         if (!hasExactFileMatch) {
+            const langIcon = isLanguageQuery ? getLanguageIcon(query) : null;
             const createFileCommand = {
                 id: isLanguageQuery ? "Create new file" : `Create new file "${query}"`,
                 type: 'create-file',
-                icon: isLanguageQuery ? getLanguageIcon(query) : '📄',
+                icon: langIcon ? langIcon.glyph : DEFAULT_FILE_ICON,
+                iconColor: langIcon?.color,
                 query,
                 requiresInput: isLanguageQuery
             };
@@ -150,23 +111,90 @@ function createCommandResults(query, view, searchResults) {
             const renameCommand = {
                 id: `Rename to "${query}"`,
                 type: 'rename-file',
-                icon: '✏️',
+                icon: '\uf044', // nf-fa-pencil_square_o (edit icon)
                 query
             };
             commands.push(renameCommand);
         }
     }
+    // Open file (filesystem browser) — always shown
+    commands.push({
+        id: 'Open file',
+        type: 'open-file',
+        icon: FOLDER_OPEN_ICON,
+        query: '',
+    });
+    // Import commands — always shown
+    commands.push({
+        id: 'Import file(s)',
+        type: 'import-local-files',
+        icon: '\uf15b', // nf-fa-file
+        query: '',
+    });
+    commands.push({
+        id: 'Import folder(s)',
+        type: 'import-local-folder',
+        icon: FOLDER_ICON,
+        query: '',
+    });
     return commands;
 }
+async function importFiles(files, view) {
+    const { fs, index } = view.state.facet(CodeblockFacet);
+    for (const file of files) {
+        const path = file.webkitRelativePath || file.name;
+        const dir = path.substring(0, path.lastIndexOf('/'));
+        if (dir)
+            await fs.mkdir(dir, { recursive: true });
+        await fs.writeFile(path, await file.text());
+        if (index)
+            index.add(path);
+        LSP.notifyFileChanged(path, FileChangeType.Created);
+    }
+    if (index?.savePath)
+        await index.save(fs, index.savePath);
+    // Open first imported file
+    if (files.length > 0) {
+        const first = files[0].webkitRelativePath || files[0].name;
+        safeDispatch(view, { effects: openFileEffect.of({ path: first }) });
+    }
+}
+// Create an LSP log overlay element
+function createLspLogOverlay() {
+    const overlay = document.createElement("div");
+    overlay.className = "cm-settings-overlay";
+    // Log content
+    const content = document.createElement("div");
+    content.className = "cm-lsp-log-content";
+    overlay.appendChild(content);
+    function render() {
+        const entries = LspLog.entries();
+        const fragment = document.createDocumentFragment();
+        for (const entry of entries) {
+            const div = document.createElement("div");
+            div.className = `cm-lsp-log-entry cm-lsp-log-${entry.level}`;
+            const time = new Date(entry.timestamp).toLocaleTimeString();
+            div.textContent = `[${time}] [${entry.level}] ${entry.message}`;
+            fragment.appendChild(div);
+        }
+        content.replaceChildren(fragment);
+        content.scrollTop = content.scrollHeight;
+    }
+    render();
+    const unsub = LspLog.subscribe(render);
+    overlay._lspLogUnsub = unsub;
+    return overlay;
+}
+const MIN_LOADING_MS = 400;
 // Toolbar Panel
 export const toolbarPanel = (view) => {
     let { filepath, language, index } = view.state.facet(CodeblockFacet);
     const dom = document.createElement("div");
     dom.className = "cm-toolbar-panel";
-    // Create state icon (left side)
+    // Create state icon (left side) — magnifying glass at rest
     const stateIcon = document.createElement("div");
     stateIcon.className = "cm-toolbar-state-icon";
-    stateIcon.textContent = "📄"; // Default file icon
+    stateIcon.textContent = SEARCH_ICON;
     // Create container for state icon to help with alignment
     const stateIconContainer = document.createElement("div");
     stateIconContainer.className = "cm-toolbar-state-icon-container";
@@ -181,21 +209,149 @@ export const toolbarPanel = (view) => {
     input.value = filepath || language || "";
     input.className = "cm-toolbar-input";
     inputContainer.appendChild(input);
+    // LSP log button (shows file-type icon of current file, hidden when lspLogEnabled is false)
+    const lspLogBtn = document.createElement("button");
+    lspLogBtn.className = "cm-toolbar-lsp-log";
+    lspLogBtn.style.fontFamily = 'var(--cm-icon-font-family)';
+    function updateLspLogIcon() {
+        const filePath = view.state.field(currentFileField).path;
+        if (filePath) {
+            const icon = getFileIcon(filePath);
+            lspLogBtn.textContent = icon.glyph;
+            lspLogBtn.style.color = icon.color || '';
+        }
+        else {
+            lspLogBtn.textContent = DEFAULT_FILE_ICON;
+            lspLogBtn.style.color = '';
+        }
+    }
+    function updateLspLogVisibility() {
+        const enabled = view.state.field(settingsField).lspLogEnabled;
+        lspLogBtn.style.display = enabled ? '' : 'none';
+    }
+    updateLspLogIcon();
+    updateLspLogVisibility();
+    // Settings cog button (far right of toolbar)
+    const settingsCog = document.createElement("button");
+    settingsCog.className = "cm-toolbar-settings-cog";
+    settingsCog.style.fontFamily = 'var(--cm-icon-font-family)';
+    settingsCog.textContent = COG_ICON;
+    // Overlay management
+    let activeOverlay = null;
+    let activeOverlayType = null;
+    let savedInputValue = null;
+    const overlayLabels = {
+        'settings': 'settings',
+        'lsp-log': 'lsp.log',
+    };
+    function updateCogAppearance() {
+        if (activeOverlayType) {
+            settingsCog.textContent = '\u2715'; // ✕
+            settingsCog.style.fontFamily = '';
+            settingsCog.classList.add('cm-cog-active');
+        }
+        else {
+            settingsCog.textContent = COG_ICON;
+            settingsCog.style.fontFamily = 'var(--cm-icon-font-family)';
+            settingsCog.classList.remove('cm-cog-active');
+        }
+    }
+    function showOverlay(overlay) {
+        const panelsTop = view.dom.querySelector('.cm-panels-top');
+        if (panelsTop) {
+            overlay.style.top = `${panelsTop.getBoundingClientRect().height}px`;
+        }
+        view.dom.appendChild(overlay);
+    }
+    function openOverlay(type, overlay) {
+        // Save current input and show overlay label
+        savedInputValue = input.value;
+        input.value = overlayLabels[type];
+        activeOverlay = overlay;
+        activeOverlayType = type;
+        showOverlay(overlay);
+        updateCogAppearance();
+    }
+    function closeOverlay() {
+        if (activeOverlay) {
+            // Clean up LSP log subscription if applicable
+            if (activeOverlay._lspLogUnsub) {
+                activeOverlay._lspLogUnsub();
+            }
+            activeOverlay.remove();
+            activeOverlay = null;
+            activeOverlayType = null;
+            // Restore input text
+            if (savedInputValue !== null) {
+                input.value = savedInputValue;
+                savedInputValue = null;
+            }
+            updateCogAppearance();
+        }
+    }
+    settingsCog.addEventListener("click", () => {
+        if (activeOverlayType) {
+            closeOverlay();
+        }
+        else {
+            openOverlay('settings', createSettingsOverlay(view));
+        }
+    });
+    lspLogBtn.addEventListener("click", () => {
+        if (activeOverlayType === 'lsp-log') {
+            closeOverlay();
+        }
+        else {
+            closeOverlay();
+            openOverlay('lsp-log', createLspLogOverlay());
+        }
+    });
+    dom.appendChild(lspLogBtn);
+    dom.appendChild(settingsCog);
     const resultsList = document.createElement("ul");
     resultsList.className = "cm-search-results";
     dom.appendChild(resultsList);
     let selectedIndex = 0;
     let namingMode = { active: false, type: 'create-file', originalQuery: '' };
+    let browseMode = { active: false, currentPath: '/', filter: '' };
+    let loadingStartTime = null;
+    // System theme media query listener
+    const systemThemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    function handleSystemThemeChange() {
+        const settings = view.state.field(settingsField);
+        if (settings.theme === 'system') {
+            safeDispatch(view, {
+                effects: setThemeEffect.of({ dark: systemThemeQuery.matches })
+            });
+        }
+    }
+    systemThemeQuery.addEventListener('change', handleSystemThemeChange);
+    // Apply initial settings (font size, font family, theme)
+    function applySettings() {
+        const settings = view.state.field(settingsField);
+        view.dom.style.setProperty('--cm-font-size', `${settings.fontSize}px`);
+        if (settings.fontFamily) {
+            view.dom.style.setProperty('--cm-font-family', settings.fontFamily);
+        }
+        else {
+            view.dom.style.removeProperty('--cm-font-family');
+        }
+    }
+    applySettings();
+    // Apply initial theme
+    const initialSettings = view.state.field(settingsField);
+    const initialDark = resolveThemeDark(initialSettings.theme);
+    view.dom.setAttribute('data-theme', initialDark ? 'dark' : 'light');
     // Tracks gutter width for toolbar alignment
     function updateGutterWidthVariables() {
         const gutters = view.dom.querySelector('.cm-gutters');
         if (gutters) {
             const gutterWidth = gutters.getBoundingClientRect().width;
-            dom.style.setProperty('--cm-gutter-width', `${gutterWidth}px`);
+            view.dom.style.setProperty('--cm-gutter-width', `${gutterWidth}px`);
             const numberGutter = gutters.querySelector('.cm-lineNumbers');
             if (numberGutter) {
                 const numberGutterWidth = numberGutter.getBoundingClientRect().width;
-                dom.style.setProperty('--cm-gutter-lineno-width', `${numberGutterWidth}px`);
+                view.dom.style.setProperty('--cm-gutter-lineno-width', `${numberGutterWidth}px`);
             }
         }
     }
@@ -215,12 +371,33 @@ export const toolbarPanel = (view) => {
     setupGutterObserver();
     const renderItem = (result, i) => {
         const li = document.createElement("li");
-        li.className = `cm-search-result ${isCommandResult(result) ? 'cm-command-result' : 'cm-file-result'}`;
+        let resultClass = 'cm-file-result';
+        if (isCommandResult(result))
+            resultClass = 'cm-command-result';
+        else if (isBrowseEntry(result))
+            resultClass = result.type === 'browse-file' ? 'cm-file-result' : 'cm-browse-dir-result';
+        li.className = `cm-search-result ${resultClass}`;
         const resultIconContainer = document.createElement("div");
         resultIconContainer.className = "cm-search-result-icon-container";
         const resultIcon = document.createElement("div");
         resultIcon.className = "cm-search-result-icon";
-        resultIcon.textContent = isCommandResult(result) ? result.icon : '📄';
+        resultIcon.style.fontFamily = 'var(--cm-icon-font-family)';
+        if (isBrowseEntry(result)) {
+            resultIcon.textContent = result.icon;
+            if (result.iconColor)
+                resultIcon.style.color = result.iconColor;
+        }
+        else if (isCommandResult(result)) {
+            resultIcon.textContent = result.icon;
+            if (result.iconColor)
+                resultIcon.style.color = result.iconColor;
+        }
+        else {
+            const icon = getFileIcon(result.id);
+            resultIcon.textContent = icon.glyph;
+            if (icon.color)
+                resultIcon.style.color = icon.color;
+        }
         resultIconContainer.appendChild(resultIcon);
         li.appendChild(resultIconContainer);
         const resultLabel = document.createElement("div");
@@ -238,24 +415,17 @@ export const toolbarPanel = (view) => {
     function updateDropdown() {
         const results = view.state.field(searchResultsField);
         const children = [];
-        // Separate commands from search results
-        const commands = results.filter(isCommandResult);
-        const searchResults = results.filter(isSearchResult);
-        let currentIndex = 0;
-        // Render commands section
-        commands.forEach((command) => {
-            children.push(renderItem(command, currentIndex));
-            currentIndex++;
-        });
-        // Render search results section
-        searchResults.forEach((result) => {
-            children.push(renderItem(result, currentIndex));
-            currentIndex++;
+        // Render items in state array order (search results first, commands second)
+        results.forEach((result, i) => {
+            children.push(renderItem(result, i));
         });
         resultsList.replaceChildren(...children);
     }
     function selectResult(result) {
-        if (isCommandResult(result)) {
+        if (isBrowseEntry(result)) {
+            navigateBrowse(result);
+        }
+        else if (isCommandResult(result)) {
             handleCommandResult(result);
         }
         else {
@@ -264,10 +434,10 @@ export const toolbarPanel = (view) => {
     }
     function updateStateIcon() {
         if (namingMode.active) {
-            stateIcon.textContent = namingMode.type === 'create-file' ? '📄' : '✏️';
+            stateIcon.textContent = namingMode.type === 'create-file' ? DEFAULT_FILE_ICON : '\uf044';
         }
         else {
-            stateIcon.textContent = '📄'; // Default file icon
+            stateIcon.textContent = SEARCH_ICON;
         }
     }
     function enterNamingMode(type, originalQuery, languageExtension) {
@@ -286,8 +456,125 @@ export const toolbarPanel = (view) => {
         updateStateIcon();
         input.placeholder = '';
     }
+    // --- Browse mode functions ---
+    async function enterBrowseMode(startPath) {
+        const { cwd } = view.state.facet(CodeblockFacet);
+        const browsePath = startPath || cwd || '/';
+        browseMode = { active: true, currentPath: browsePath, filter: '' };
+        // Update state icon to folder
+        stateIcon.textContent = FOLDER_OPEN_ICON;
+        input.value = browsePath.endsWith('/') ? browsePath : browsePath + '/';
+        input.placeholder = '';
+        input.focus();
+        await refreshBrowseEntries();
+    }
+    async function refreshBrowseEntries() {
+        if (!browseMode.active)
+            return;
+        const { fs } = view.state.facet(CodeblockFacet);
+        const dir = browseMode.currentPath;
+        try {
+            const entries = await fs.readDir(dir);
+            const browseResults = [];
+            // Add parent directory entry if not at root
+            if (dir !== '/' && dir !== '') {
+                const parentPath = dir.split('/').slice(0, -1).join('/') || '/';
+                browseResults.push({
+                    id: '..',
+                    type: 'browse-parent',
+                    icon: PARENT_DIR_ICON,
+                    fullPath: parentPath,
+                });
+            }
+            // Separate directories and files, sort each alphabetically
+            const dirs = [];
+            const files = [];
+            for (const [name, fileType] of entries) {
+                // Skip hidden/internal files
+                if (name.startsWith('.'))
+                    continue;
+                const fullPath = dir === '/' ? `${name}` : `${dir}/${name}`;
+                // FileType.Directory = 2
+                if (fileType === 2) {
+                    dirs.push({
+                        id: name + '/',
+                        type: 'browse-directory',
+                        icon: FOLDER_ICON,
+                        fullPath,
+                    });
+                }
+                else {
+                    const icon = getFileIcon(name);
+                    files.push({
+                        id: name,
+                        type: 'browse-file',
+                        icon: icon.glyph,
+                        iconColor: icon.color,
+                        fullPath,
+                    });
+                }
+            }
+            dirs.sort((a, b) => a.id.localeCompare(b.id));
+            files.sort((a, b) => a.id.localeCompare(b.id));
+            // Apply filter
+            const filter = browseMode.filter.toLowerCase();
+            const filtered = [...browseResults, ...dirs, ...files].filter(entry => entry.type === 'browse-parent' || entry.id.toLowerCase().includes(filter));
+            selectedIndex = 0;
+            safeDispatch(view, { effects: setSearchResults.of(filtered) });
+        }
+        catch (e) {
+            console.error('Failed to read directory:', e);
+            exitBrowseMode();
+        }
+    }
+    async function navigateBrowse(entry) {
+        if (entry.type === 'browse-file') {
+            // Open the file and exit browse mode
+            const path = entry.fullPath;
+            exitBrowseMode();
+            input.value = path;
+            safeDispatch(view, {
+                effects: [setSearchResults.of([]), openFileEffect.of({ path })]
+            });
+        }
+        else {
+            // Navigate into directory (or parent)
+            browseMode.currentPath = entry.fullPath;
+            browseMode.filter = '';
+            const displayPath = entry.fullPath === '/' ? '/' : entry.fullPath + '/';
+            input.value = displayPath;
+            selectedIndex = 0;
+            await refreshBrowseEntries();
+        }
+    }
+    function exitBrowseMode() {
+        browseMode = { active: false, currentPath: '/', filter: '' };
+        updateStateIcon();
+        input.placeholder = '';
+    }
+    function triggerFileImport(folder) {
+        safeDispatch(view, { effects: setSearchResults.of([]) });
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        if (folder) {
+            fileInput.setAttribute('webkitdirectory', '');
+        }
+        else {
+            fileInput.multiple = true;
+        }
+        fileInput.addEventListener('change', () => {
+            if (fileInput.files?.length) {
+                importFiles(fileInput.files, view);
+            }
+        });
+        fileInput.click();
+    }
     function handleCommandResult(command) {
-        if (command.type === 'create-file') {
+        if (command.type === 'open-file') {
+            enterBrowseMode();
+            return;
+        }
+        else if (command.type === 'create-file') {
             if (command.requiresInput) {
                 // Enter naming mode for language-specific file
                 enterNamingMode('create-file', command.query, command.query);
@@ -314,6 +601,12 @@ export const toolbarPanel = (view) => {
                 });
             }
         }
+        else if (command.type === 'import-local-files') {
+            triggerFileImport(false);
+        }
+        else if (command.type === 'import-local-folder') {
+            triggerFileImport(true);
+        }
     }
     function handleSearchResult(result) {
         input.value = result.id;
@@ -348,10 +641,17 @@ export const toolbarPanel = (view) => {
         }
         exitNamingMode();
     }
+    function resetInputToCurrentFile() {
+        const currentFile = view.state.field(currentFileField);
+        input.value = currentFile.path || '';
+    }
     // Close dropdown when clicking outside
     function handleClickOutside(event) {
         if (!dom.contains(event.target)) {
+            if (browseMode.active)
+                exitBrowseMode();
             safeDispatch(view, { effects: setSearchResults.of([]) });
+            resetInputToCurrentFile();
         }
     }
     input.addEventListener("click", () => {
@@ -362,10 +662,15 @@ export const toolbarPanel = (view) => {
             if (query.trim()) {
                 // Get regular search results from index first
                 const searchResults = (index?.search(query) || []).slice(0, 100);
-                // Add command results first (passing search results to check for existing files)
+                // Add command results (passing search results to check for existing files)
                 const commands = createCommandResults(query, view, searchResults);
+                // Search results first, then commands
                 results = searchResults.concat(commands);
             }
+            else {
+                // Show import commands when dropdown opens with empty query
+                results = createCommandResults('', view, []);
+            }
             safeDispatch(view, { effects: setSearchResults.of(results) });
             // Add click-outside listener when dropdown opens
             document.addEventListener("click", handleClickOutside);
@@ -378,15 +683,27 @@ export const toolbarPanel = (view) => {
         if (namingMode.active) {
             return;
         }
+        // If in browse mode, filter the directory entries
+        if (browseMode.active) {
+            // Extract filter text after the directory path prefix
+            const prefix = browseMode.currentPath === '/' ? '/' : browseMode.currentPath + '/';
+            browseMode.filter = query.startsWith(prefix) ? query.slice(prefix.length) : query;
+            refreshBrowseEntries();
+            return;
+        }
         let results = [];
         if (query.trim()) {
             // Get regular search results from index first
             const searchResults = (index?.search(query) || []).slice(0, 1000);
-            // Add command results first (passing search results to check for existing files)
+            // Add command results (passing search results to check for existing files)
             const commands = createCommandResults(query, view, searchResults);
-            results.push(...commands);
-            // Add search results
+            // Search results first, then commands
             results.push(...searchResults);
+            results.push(...commands);
+        }
+        else {
+            // Show import commands even with empty query
+            results = createCommandResults('', view, []);
         }
         safeDispatch(view, { effects: setSearchResults.of(results) });
     });
@@ -404,6 +721,47 @@ export const toolbarPanel = (view) => {
             }
             return;
         }
+        // Browse mode keyboard handling
+        if (browseMode.active) {
+            const results = view.state.field(searchResultsField);
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                if (results.length) {
+                    selectedIndex = mod(selectedIndex + 1, results.length);
+                    updateDropdown();
+                }
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                if (results.length) {
+                    selectedIndex = mod(selectedIndex - 1, results.length);
+                    updateDropdown();
+                }
+            }
+            else if (event.key === "Enter" && results.length && selectedIndex >= 0) {
+                event.preventDefault();
+                selectResult(results[selectedIndex]);
+            }
+            else if (event.key === "Backspace") {
+                // If filter is empty and backspace pressed, go up a directory
+                if (browseMode.filter === '' && browseMode.currentPath !== '/') {
+                    event.preventDefault();
+                    const parentPath = browseMode.currentPath.split('/').slice(0, -1).join('/') || '/';
+                    browseMode.currentPath = parentPath;
+                    const displayPath = parentPath === '/' ? '/' : parentPath + '/';
+                    input.value = displayPath;
+                    refreshBrowseEntries();
+                }
+            }
+            else if (event.key === "Escape") {
+                event.preventDefault();
+                exitBrowseMode();
+                safeDispatch(view, { effects: setSearchResults.of([]) });
+                resetInputToCurrentFile();
+                input.blur();
+            }
+            return;
+        }
         // Normal search mode
         const results = view.state.field(searchResultsField);
         if (event.key === "ArrowDown") {
@@ -412,6 +770,10 @@ export const toolbarPanel = (view) => {
                 selectedIndex = mod(selectedIndex + 1, results.length);
                 updateDropdown();
             }
+            else {
+                // No dropdown open — move cursor to editor body
+                view.focus();
+            }
         }
         else if (event.key === "ArrowUp") {
             event.preventDefault();
@@ -424,6 +786,12 @@ export const toolbarPanel = (view) => {
             event.preventDefault();
             selectResult(results[selectedIndex]);
         }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            safeDispatch(view, { effects: setSearchResults.of([]) });
+            resetInputToCurrentFile();
+            input.blur();
+        }
     });
     return {
         dom,
@@ -439,10 +807,55 @@ export const toolbarPanel = (view) => {
                     document.removeEventListener("click", handleClickOutside);
                 }
             }
+            // Apply settings when they change
+            const prevSettings = update.startState.field(settingsField);
+            const nextSettings = update.state.field(settingsField);
+            if (prevSettings.fontSize !== nextSettings.fontSize || prevSettings.fontFamily !== nextSettings.fontFamily) {
+                applySettings();
+            }
+            if (prevSettings.lspLogEnabled !== nextSettings.lspLogEnabled) {
+                updateLspLogVisibility();
+                // Close the log overlay if the user disables it
+                if (!nextSettings.lspLogEnabled && activeOverlayType === 'lsp-log') {
+                    closeOverlay();
+                }
+            }
+            // Update loading indicator with minimum animation duration
+            const prevFile = update.startState.field(currentFileField);
+            const nextFile = update.state.field(currentFileField);
+            if (prevFile.loading !== nextFile.loading) {
+                if (nextFile.loading) {
+                    loadingStartTime = Date.now();
+                    stateIcon.textContent = ''; // clear glyph; CSS border spinner handles the visual
+                    stateIcon.classList.add('cm-loading');
+                }
+                else {
+                    const elapsed = loadingStartTime ? Date.now() - loadingStartTime : Infinity;
+                    const remaining = Math.max(0, MIN_LOADING_MS - elapsed);
+                    loadingStartTime = null;
+                    setTimeout(() => {
+                        if (!view.state.field(currentFileField).loading) {
+                            stateIcon.textContent = SEARCH_ICON;
+                            stateIcon.classList.remove('cm-loading');
+                        }
+                    }, remaining);
+                }
+            }
+            // Update LSP log icon when file changes
+            if (prevFile.path !== nextFile.path) {
+                updateLspLogIcon();
+            }
+            // Sync input value when file path changes (unless overlay is open or user is naming)
+            if (prevFile.path !== nextFile.path && !namingMode.active && !activeOverlayType) {
+                input.value = nextFile.path || '';
+            }
         },
         destroy() {
             // Clean up event listeners when panel is destroyed
             document.removeEventListener("click", handleClickOutside);
+            systemThemeQuery.removeEventListener('change', handleSystemThemeChange);
+            // Clean up overlay
+            closeOverlay();
             // Clean up ResizeObserver
             if (gutterObserver) {
                 gutterObserver.disconnect();