xtralab 0.12.5 → 0.13.1

package/lib/editorBreadcrumbs/widget.js

@@ -2,6 +2,7 @@ import { PageConfig } from '@jupyterlab/coreutils';
 import { homeIcon as rootIcon } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 const EDITOR_BREADCRUMBS_CLASS = 'jp-xtralab-EditorBreadcrumbs';
+const TOOLBAR_SPACER_CLASS = 'jp-Toolbar-spacer';
 const BREADCRUMBS_CONTAINER_CLASS = 'jp-BreadCrumbs-container';
 const BREADCRUMBS_CONTENT_CLASS = 'jp-BreadCrumbs-content';
 const ROOT_CLASS = 'jp-BreadCrumbs-home';
@@ -25,6 +26,10 @@ export class EditorBreadcrumbs extends Widget {
         this._commands = options.commands;
         this._trans = options.trans;
         this.addClass(EDITOR_BREADCRUMBS_CLASS);
+        // The breadcrumbs stretch to fill the toolbar, so ReactiveToolbar's
+        // overflow math must count them as a spacer (2px) — measured at their
+        // stretched clientWidth they would evict every item into the popup.
+        this.addClass(TOOLBAR_SPACER_CLASS);
         this.node.setAttribute('aria-label', this._trans.__('Editor file path'));
         this._container = document.createElement('span');
         this._container.className = BREADCRUMBS_CONTAINER_CLASS;

package/lib/fileBrowser/commands.d.ts

@@ -20,6 +20,7 @@ export declare namespace CommandIDs {
     const download = "xtralab:download";
     const refresh = "xtralab:refresh";
     const collapseAll = "xtralab:collapse-all";
+    const toggleFileFilter = "xtralab:toggle-file-filter";
     const createNewDirectory = "xtralab:create-new-directory";
     const newLauncher = "xtralab:new-launcher";
     const revealPath = "xtralab:reveal-path";
@@ -52,12 +53,13 @@ export declare namespace ToolbarNames {
     const newDirectory = "new-directory";
     const refresh = "refresh";
     const collapseAll = "collapse-all";
+    const toggleFileFilter = "toggle-file-filter";
 }
 /**
  * Populate the file browser's toolbar with the buttons that mirror the
  * default JupyterLab file browser: a "+" launcher button, a new-folder
- * button, and a refresh button. Returns a list of button names so callers
- * can extend it or remove items if they need to.
+ * button, a refresh button, a collapse-all button, and the file filter
+ * toggle.
  */
 export declare function populateToolbar(opts: {
     app: JupyterFrontEnd;

package/lib/fileBrowser/commands.js

@@ -1,7 +1,7 @@
 import { Clipboard, Dialog, InputDialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
 import { PageConfig, PathExt } from '@jupyterlab/coreutils';
 import { nullTranslator } from '@jupyterlab/translation';
-import { addIcon, closeIcon, collapseAllIcon, CommandToolbarButton, copyIcon, downloadIcon, editIcon, fileIcon, newFolderIcon, refreshIcon } from '@jupyterlab/ui-components';
+import { addIcon, closeIcon, collapseAllIcon, CommandToolbarButton, copyIcon, downloadIcon, editIcon, fileIcon, filterIcon, newFolderIcon, refreshIcon } from '@jupyterlab/ui-components';
 import { toCanonicalPath, toServerPath } from './contents';
 import { FILE_BROWSER_ID } from './widget';
 /**
@@ -22,6 +22,7 @@ export var CommandIDs;
     CommandIDs.download = 'xtralab:download';
     CommandIDs.refresh = 'xtralab:refresh';
     CommandIDs.collapseAll = 'xtralab:collapse-all';
+    CommandIDs.toggleFileFilter = 'xtralab:toggle-file-filter';
     CommandIDs.createNewDirectory = 'xtralab:create-new-directory';
     CommandIDs.newLauncher = 'xtralab:new-launcher';
     CommandIDs.revealPath = 'xtralab:reveal-path';
@@ -393,6 +394,22 @@ export function registerCommands(opts) {
             browser.collapseAll();
         }
     });
+    commands.addCommand(CommandIDs.toggleFileFilter, {
+        label: trans.__('Toggle File Filter'),
+        caption: trans.__('Show or hide the file filter'),
+        icon: filterIcon.bindprops({ stylesheet: 'menuItem' }),
+        isToggled: () => browser.fileFilterVisible,
+        execute: () => {
+            browser.toggleFileFilter();
+        }
+    });
+    // Refresh the toggle's state however the filter is shown or hidden —
+    // the toolbar button, or the auto-show that kicks in when typing with
+    // the tree focused opens a search session.
+    const onFilterVisibleChanged = () => {
+        commands.notifyCommandChanged(CommandIDs.toggleFileFilter);
+    };
+    browser.fileFilterVisibleChanged.connect(onFilterVisibleChanged);
     // Public reveal seam. Other plugins (editor breadcrumbs, future
     // "reveal in tree" actions) call this command rather than depending
     // on the file browser widget directly. Activating the sidebar is part
@@ -492,6 +509,7 @@ export function registerCommands(opts) {
         var _a;
         app.contextMenu.opened.disconnect(updateOpenWithMenu);
         (_a = app.shell.currentChanged) === null || _a === void 0 ? void 0 : _a.disconnect(onCurrentChanged);
+        browser.fileFilterVisibleChanged.disconnect(onFilterVisibleChanged);
         paletteItem === null || paletteItem === void 0 ? void 0 : paletteItem.dispose();
     };
 }
@@ -506,12 +524,13 @@ export var ToolbarNames;
     ToolbarNames.newDirectory = 'new-directory';
     ToolbarNames.refresh = 'refresh';
     ToolbarNames.collapseAll = 'collapse-all';
+    ToolbarNames.toggleFileFilter = 'toggle-file-filter';
 })(ToolbarNames || (ToolbarNames = {}));
 /**
  * Populate the file browser's toolbar with the buttons that mirror the
  * default JupyterLab file browser: a "+" launcher button, a new-folder
- * button, and a refresh button. Returns a list of button names so callers
- * can extend it or remove items if they need to.
+ * button, a refresh button, a collapse-all button, and the file filter
+ * toggle.
  */
 export function populateToolbar(opts) {
     const { app, browser } = opts;
@@ -536,4 +555,9 @@ export function populateToolbar(opts) {
         id: CommandIDs.collapseAll,
         label: ''
     }));
+    browser.toolbar.addItem(ToolbarNames.toggleFileFilter, new CommandToolbarButton({
+        commands,
+        id: CommandIDs.toggleFileFilter,
+        label: ''
+    }));
 }

package/lib/fileBrowser/fileBrowser.js

@@ -64,9 +64,20 @@ const GIT_REPO_PATH = '';
  * resolution cost just for one string.
  */
 const FILE_TREE_TAG = 'file-tree-container';
+/**
+ * Injected into the tree's shadow root. The second rule hides the search
+ * box unless the host carries the visibility marker set by the filter
+ * bridge effect below — `@pierre/trees` always renders the box when
+ * `search` is enabled, and its stylesheet lives in the shadow root where
+ * outside CSS cannot reach.
+ */
 const FILE_TREE_UNSAFE_CSS = '[data-type="item"][data-item-selected="true"] ' +
     '[data-item-section="spacing-item"] {' +
     'border-left-color: transparent;' +
+    '}' +
+    ':host(:not([data-xtralab-filter-visible])) ' +
+    '[data-file-tree-search-container] {' +
+    'display: none;' +
     '}';
 /**
  * Renders a `@pierre/trees` file tree backed by the Jupyter contents API.
@@ -652,6 +663,17 @@ export function FileBrowserComponent(props) {
         };
         contentsManager.fileChanged.connect(onContentsFileChanged);
         const unsubscribe = model.subscribe(() => {
+            // Search-driven expansion must not trigger fetches: the tree
+            // auto-expands every directory whose path matches the query, and
+            // treating those as user expansions would recursively fetch every
+            // matching subtree — a single common letter can walk the whole
+            // workspace, node_modules included. Closing the search restores
+            // the pre-search expansion state, and a directory clicked in the
+            // results is toggled after the session closes, so real expansions
+            // are still fetched the moment the session ends.
+            if (model.isSearchOpen()) {
+                return;
+            }
             knownDirs.forEach((state, canonicalPath) => {
                 if (state !== 'unloaded') {
                     return;
@@ -744,6 +766,49 @@ export function FileBrowserComponent(props) {
             unsubscribe();
         };
     }, [model, widget]);
+    // Bridge the filter-box visibility between the widget and the tree. The
+    // widget owns the flag; applying it stamps the marker attribute the
+    // unsafeCSS rule keys on and opens or closes the model's search session
+    // (opening focuses the input, closing clears any active filter). The
+    // model subscription covers the reverse direction: typing a printable
+    // character while the tree has focus opens a session on the tree's own
+    // initiative, and the box must surface for that session to be usable.
+    React.useEffect(() => {
+        if (widget === undefined) {
+            return;
+        }
+        const apply = (visible) => {
+            const host = model.getFileTreeContainer();
+            if (host !== undefined) {
+                if (visible) {
+                    host.dataset.xtralabFilterVisible = 'true';
+                }
+                else {
+                    delete host.dataset.xtralabFilterVisible;
+                }
+            }
+            if (visible && !model.isSearchOpen()) {
+                model.openSearch();
+            }
+            else if (!visible && model.isSearchOpen()) {
+                model.closeSearch();
+            }
+        };
+        apply(widget.fileFilterVisible);
+        const visibleSlot = (sender, visible) => {
+            apply(visible);
+        };
+        widget.fileFilterVisibleChanged.connect(visibleSlot);
+        const unsubscribe = model.subscribe(() => {
+            if (model.isSearchOpen() && !widget.fileFilterVisible) {
+                widget.setFileFilterVisible(true);
+            }
+        });
+        return () => {
+            widget.fileFilterVisibleChanged.disconnect(visibleSlot);
+            unsubscribe();
+        };
+    }, [model, widget]);
     const wrapperRef = React.useRef(null);
     React.useEffect(() => {
         const wrapper = wrapperRef.current;

package/lib/fileBrowser/widget.d.ts

@@ -71,6 +71,19 @@ export interface IXtralabFileBrowser {
      * directories, calling `.collapse()` on each expanded one.
      */
     readonly collapseAllRequested: ISignal<IXtralabFileBrowser, void>;
+    /**
+     * Whether the filter box above the tree is shown. Mirrors the default
+     * file browser's `showFileFilter`: hidden on startup and flipped by the
+     * toolbar toggle. Also forced to `true` when the tree opens a search
+     * session on its own — typing a letter while the tree has focus.
+     */
+    readonly fileFilterVisible: boolean;
+    /**
+     * Emits when {@link fileFilterVisible} changes. The React component
+     * listens to show or hide the filter box; the toggle command listens
+     * to refresh its toggled state.
+     */
+    readonly fileFilterVisibleChanged: ISignal<IXtralabFileBrowser, boolean>;
     /**
      * Trigger a refresh of every loaded directory in the tree.
      */
@@ -98,6 +111,14 @@ export interface IXtralabFileBrowser {
      * Ask the tree to collapse every currently expanded folder.
      */
     collapseAll(): void;
+    /**
+     * Show or hide the filter box above the tree.
+     */
+    setFileFilterVisible(visible: boolean): void;
+    /**
+     * Toggle the filter box above the tree.
+     */
+    toggleFileFilter(): void;
 }
 /**
  * Lumino widget that hosts the React-based `@pierre/trees` file browser.
@@ -115,6 +136,8 @@ export declare class XtralabFileBrowser extends Widget implements IXtralabFileBr
     get revealRequested(): ISignal<this, string>;
     get rootRequested(): ISignal<this, void>;
     get collapseAllRequested(): ISignal<this, void>;
+    get fileFilterVisible(): boolean;
+    get fileFilterVisibleChanged(): ISignal<this, boolean>;
     /**
      * Update the cached selection. Called from the React tree when the
      * underlying `@pierre/trees` model emits a selection change.
@@ -125,6 +148,8 @@ export declare class XtralabFileBrowser extends Widget implements IXtralabFileBr
     reveal(canonicalPath: string): void;
     scrollToRoot(): void;
     collapseAll(): void;
+    setFileFilterVisible(visible: boolean): void;
+    toggleFileFilter(): void;
     private _contentsManager;
     private _docManager;
     private _onOpenFile;
@@ -135,6 +160,8 @@ export declare class XtralabFileBrowser extends Widget implements IXtralabFileBr
     private _revealRequested;
     private _rootRequested;
     private _collapseAllRequested;
+    private _fileFilterVisible;
+    private _fileFilterVisibleChanged;
     private _toolbar;
     private _content;
 }

package/lib/fileBrowser/widget.js

@@ -29,6 +29,8 @@ export class XtralabFileBrowser extends Widget {
         this._revealRequested = new Signal(this);
         this._rootRequested = new Signal(this);
         this._collapseAllRequested = new Signal(this);
+        this._fileFilterVisible = false;
+        this._fileFilterVisibleChanged = new Signal(this);
         const layout = (this.layout = new PanelLayout());
         this._contentsManager = options.contentsManager;
         this._docManager = options.docManager;
@@ -77,6 +79,12 @@ export class XtralabFileBrowser extends Widget {
     get collapseAllRequested() {
         return this._collapseAllRequested;
     }
+    get fileFilterVisible() {
+        return this._fileFilterVisible;
+    }
+    get fileFilterVisibleChanged() {
+        return this._fileFilterVisibleChanged;
+    }
     /**
      * Update the cached selection. Called from the React tree when the
      * underlying `@pierre/trees` model emits a selection change.
@@ -103,6 +111,16 @@ export class XtralabFileBrowser extends Widget {
     collapseAll() {
         this._collapseAllRequested.emit();
     }
+    setFileFilterVisible(visible) {
+        if (this._fileFilterVisible === visible) {
+            return;
+        }
+        this._fileFilterVisible = visible;
+        this._fileFilterVisibleChanged.emit(visible);
+    }
+    toggleFileFilter() {
+        this.setFileFilterVisible(!this._fileFilterVisible);
+    }
 }
 /**
  * The React-rendered region of the file browser. Lives inside the host

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xtralab",
-    "version": "0.12.5",
+    "version": "0.13.1",
     "description": "An opinionated JupyterLab meta-package that bundles a curated set of extensions, ships a path-first file browser, renders jupyterlab-git's text, notebook and image diffs with its own viewers, and applies a quieter default workspace configuration.",
     "keywords": [
         "jupyter",

package/src/editorBreadcrumbs/widget.ts

@@ -6,6 +6,7 @@ import type { CommandRegistry } from '@lumino/commands';
 import { Widget } from '@lumino/widgets';
 
 const EDITOR_BREADCRUMBS_CLASS = 'jp-xtralab-EditorBreadcrumbs';
+const TOOLBAR_SPACER_CLASS = 'jp-Toolbar-spacer';
 const BREADCRUMBS_CONTAINER_CLASS = 'jp-BreadCrumbs-container';
 const BREADCRUMBS_CONTENT_CLASS = 'jp-BreadCrumbs-content';
 const ROOT_CLASS = 'jp-BreadCrumbs-home';
@@ -37,6 +38,10 @@ export class EditorBreadcrumbs extends Widget {
     this._commands = options.commands;
     this._trans = options.trans;
     this.addClass(EDITOR_BREADCRUMBS_CLASS);
+    // The breadcrumbs stretch to fill the toolbar, so ReactiveToolbar's
+    // overflow math must count them as a spacer (2px) — measured at their
+    // stretched clientWidth they would evict every item into the popup.
+    this.addClass(TOOLBAR_SPACER_CLASS);
     this.node.setAttribute('aria-label', this._trans.__('Editor file path'));
 
     this._container = document.createElement('span');

package/src/fileBrowser/commands.ts

@@ -19,6 +19,7 @@ import {
   downloadIcon,
   editIcon,
   fileIcon,
+  filterIcon,
   IDisposableMenuItem,
   newFolderIcon,
   RankedMenu,
@@ -47,6 +48,7 @@ export namespace CommandIDs {
   export const download = 'xtralab:download';
   export const refresh = 'xtralab:refresh';
   export const collapseAll = 'xtralab:collapse-all';
+  export const toggleFileFilter = 'xtralab:toggle-file-filter';
   export const createNewDirectory = 'xtralab:create-new-directory';
   export const newLauncher = 'xtralab:new-launcher';
   export const revealPath = 'xtralab:reveal-path';
@@ -484,6 +486,24 @@ export function registerCommands(opts: IRegisterCommandsOptions): () => void {
     }
   });
 
+  commands.addCommand(CommandIDs.toggleFileFilter, {
+    label: trans.__('Toggle File Filter'),
+    caption: trans.__('Show or hide the file filter'),
+    icon: filterIcon.bindprops({ stylesheet: 'menuItem' }),
+    isToggled: () => browser.fileFilterVisible,
+    execute: () => {
+      browser.toggleFileFilter();
+    }
+  });
+
+  // Refresh the toggle's state however the filter is shown or hidden —
+  // the toolbar button, or the auto-show that kicks in when typing with
+  // the tree focused opens a search session.
+  const onFilterVisibleChanged = (): void => {
+    commands.notifyCommandChanged(CommandIDs.toggleFileFilter);
+  };
+  browser.fileFilterVisibleChanged.connect(onFilterVisibleChanged);
+
   // Public reveal seam. Other plugins (editor breadcrumbs, future
   // "reveal in tree" actions) call this command rather than depending
   // on the file browser widget directly. Activating the sidebar is part
@@ -591,6 +611,7 @@ export function registerCommands(opts: IRegisterCommandsOptions): () => void {
   return () => {
     app.contextMenu.opened.disconnect(updateOpenWithMenu);
     app.shell.currentChanged?.disconnect(onCurrentChanged);
+    browser.fileFilterVisibleChanged.disconnect(onFilterVisibleChanged);
     paletteItem?.dispose();
   };
 }
@@ -605,13 +626,14 @@ export namespace ToolbarNames {
   export const newDirectory = 'new-directory';
   export const refresh = 'refresh';
   export const collapseAll = 'collapse-all';
+  export const toggleFileFilter = 'toggle-file-filter';
 }
 
 /**
  * Populate the file browser's toolbar with the buttons that mirror the
  * default JupyterLab file browser: a "+" launcher button, a new-folder
- * button, and a refresh button. Returns a list of button names so callers
- * can extend it or remove items if they need to.
+ * button, a refresh button, a collapse-all button, and the file filter
+ * toggle.
  */
 export function populateToolbar(opts: {
   app: JupyterFrontEnd;
@@ -652,4 +674,12 @@ export function populateToolbar(opts: {
       label: ''
     })
   );
+  browser.toolbar.addItem(
+    ToolbarNames.toggleFileFilter,
+    new CommandToolbarButton({
+      commands,
+      id: CommandIDs.toggleFileFilter,
+      label: ''
+    })
+  );
 }

package/src/fileBrowser/fileBrowser.tsx

@@ -93,10 +93,21 @@ const GIT_REPO_PATH = '';
  */
 const FILE_TREE_TAG = 'file-tree-container';
 
+/**
+ * Injected into the tree's shadow root. The second rule hides the search
+ * box unless the host carries the visibility marker set by the filter
+ * bridge effect below — `@pierre/trees` always renders the box when
+ * `search` is enabled, and its stylesheet lives in the shadow root where
+ * outside CSS cannot reach.
+ */
 const FILE_TREE_UNSAFE_CSS =
   '[data-type="item"][data-item-selected="true"] ' +
   '[data-item-section="spacing-item"] {' +
   'border-left-color: transparent;' +
+  '}' +
+  ':host(:not([data-xtralab-filter-visible])) ' +
+  '[data-file-tree-search-container] {' +
+  'display: none;' +
   '}';
 
 interface IFileBrowserProps {
@@ -748,6 +759,17 @@ export function FileBrowserComponent(
     contentsManager.fileChanged.connect(onContentsFileChanged);
 
     const unsubscribe = model.subscribe(() => {
+      // Search-driven expansion must not trigger fetches: the tree
+      // auto-expands every directory whose path matches the query, and
+      // treating those as user expansions would recursively fetch every
+      // matching subtree — a single common letter can walk the whole
+      // workspace, node_modules included. Closing the search restores
+      // the pre-search expansion state, and a directory clicked in the
+      // results is toggled after the session closes, so real expansions
+      // are still fetched the moment the session ends.
+      if (model.isSearchOpen()) {
+        return;
+      }
       knownDirs.forEach((state, canonicalPath) => {
         if (state !== 'unloaded') {
           return;
@@ -848,6 +870,48 @@ export function FileBrowserComponent(
     };
   }, [model, widget]);
 
+  // Bridge the filter-box visibility between the widget and the tree. The
+  // widget owns the flag; applying it stamps the marker attribute the
+  // unsafeCSS rule keys on and opens or closes the model's search session
+  // (opening focuses the input, closing clears any active filter). The
+  // model subscription covers the reverse direction: typing a printable
+  // character while the tree has focus opens a session on the tree's own
+  // initiative, and the box must surface for that session to be usable.
+  React.useEffect(() => {
+    if (widget === undefined) {
+      return;
+    }
+    const apply = (visible: boolean): void => {
+      const host = model.getFileTreeContainer();
+      if (host !== undefined) {
+        if (visible) {
+          host.dataset.xtralabFilterVisible = 'true';
+        } else {
+          delete host.dataset.xtralabFilterVisible;
+        }
+      }
+      if (visible && !model.isSearchOpen()) {
+        model.openSearch();
+      } else if (!visible && model.isSearchOpen()) {
+        model.closeSearch();
+      }
+    };
+    apply(widget.fileFilterVisible);
+    const visibleSlot = (sender: unknown, visible: boolean): void => {
+      apply(visible);
+    };
+    widget.fileFilterVisibleChanged.connect(visibleSlot);
+    const unsubscribe = model.subscribe(() => {
+      if (model.isSearchOpen() && !widget.fileFilterVisible) {
+        widget.setFileFilterVisible(true);
+      }
+    });
+    return () => {
+      widget.fileFilterVisibleChanged.disconnect(visibleSlot);
+      unsubscribe();
+    };
+  }, [model, widget]);
+
   const wrapperRef = React.useRef<HTMLDivElement | null>(null);
 
   React.useEffect(() => {

package/src/fileBrowser/widget.tsx

@@ -99,6 +99,21 @@ export interface IXtralabFileBrowser {
    */
   readonly collapseAllRequested: ISignal<IXtralabFileBrowser, void>;
 
+  /**
+   * Whether the filter box above the tree is shown. Mirrors the default
+   * file browser's `showFileFilter`: hidden on startup and flipped by the
+   * toolbar toggle. Also forced to `true` when the tree opens a search
+   * session on its own — typing a letter while the tree has focus.
+   */
+  readonly fileFilterVisible: boolean;
+
+  /**
+   * Emits when {@link fileFilterVisible} changes. The React component
+   * listens to show or hide the filter box; the toggle command listens
+   * to refresh its toggled state.
+   */
+  readonly fileFilterVisibleChanged: ISignal<IXtralabFileBrowser, boolean>;
+
   /**
    * Trigger a refresh of every loaded directory in the tree.
    */
@@ -130,6 +145,16 @@ export interface IXtralabFileBrowser {
    * Ask the tree to collapse every currently expanded folder.
    */
   collapseAll(): void;
+
+  /**
+   * Show or hide the filter box above the tree.
+   */
+  setFileFilterVisible(visible: boolean): void;
+
+  /**
+   * Toggle the filter box above the tree.
+   */
+  toggleFileFilter(): void;
 }
 
 /**
@@ -201,6 +226,14 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
     return this._collapseAllRequested;
   }
 
+  get fileFilterVisible(): boolean {
+    return this._fileFilterVisible;
+  }
+
+  get fileFilterVisibleChanged(): ISignal<this, boolean> {
+    return this._fileFilterVisibleChanged;
+  }
+
   /**
    * Update the cached selection. Called from the React tree when the
    * underlying `@pierre/trees` model emits a selection change.
@@ -235,6 +268,18 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
     this._collapseAllRequested.emit();
   }
 
+  setFileFilterVisible(visible: boolean): void {
+    if (this._fileFilterVisible === visible) {
+      return;
+    }
+    this._fileFilterVisible = visible;
+    this._fileFilterVisibleChanged.emit(visible);
+  }
+
+  toggleFileFilter(): void {
+    this.setFileFilterVisible(!this._fileFilterVisible);
+  }
+
   private _contentsManager: Contents.IManager;
   private _docManager: IDocumentManager;
   private _onOpenFile: ((serverPath: string) => void) | undefined;
@@ -245,6 +290,8 @@ export class XtralabFileBrowser extends Widget implements IXtralabFileBrowser {
   private _revealRequested = new Signal<this, string>(this);
   private _rootRequested = new Signal<this, void>(this);
   private _collapseAllRequested = new Signal<this, void>(this);
+  private _fileFilterVisible = false;
+  private _fileFilterVisibleChanged = new Signal<this, boolean>(this);
   private _toolbar: Toolbar;
   private _content: XtralabFileTreeContent;
 }

package/style/base.css

@@ -147,7 +147,7 @@
   padding: 2px 6px;
   background-color: var(--jp-layout-color1);
   border: 1px solid var(--jp-border-color2);
-  border-radius: 2px;
+  border-radius: 6px;
   color: var(--jp-ui-font-color1);
   font-family: var(--jp-ui-font-family);
   font-size: var(--jp-ui-font-size1);