@jlab-enhanced/favorites 3.4.0 → 3.5.0

package/lib/components.d.ts

@@ -3,6 +3,7 @@ import { ReactWidget } from '@jupyterlab/ui-components';
 import * as React from 'react';
 import { FavoritesManager } from './manager';
 import { IFavorites } from './token';
+import { IStateDB } from '@jupyterlab/statedb';
 declare namespace types {
     type FavoriteComponentProps = {
         favorite: IFavorites.Favorite;
@@ -19,7 +20,14 @@ export declare class FavoritesWidget extends ReactWidget {
     private manager;
     private filebrowser;
     private pathChanged;
-    constructor(manager: FavoritesManager, filebrowser: FileBrowser);
+    private _stateDB?;
+    constructor(manager: FavoritesManager, filebrowser: FileBrowser, stateDB: IStateDB | null);
     render(): JSX.Element;
 }
+/**
+ * Information persisted in StateDB.
+ */
+export interface IPersistedState {
+    height?: number;
+}
 export {};

package/lib/components.js

@@ -43,6 +43,11 @@ const FAVORITE_BREADCRUMB_ICON_CLASS = 'jp-Favorites-BreadCrumbs-Icon';
  * The spacing from the bottom of the FileBrowser to leave when resizing the Favorites container.
  */
 const BOTTOM_SPACING = 100;
+/**
+ * The key in State DB.
+ * In JupyterLab the value will be stored per workspace.
+ */
+const STATE_DB_KEY = 'favorites';
 const FavoriteComponent = (props) => {
     const { favorite, handleClick } = props;
     let [displayName, dirname] = getName(favorite.path);
@@ -90,10 +95,34 @@ export const FavoritesBreadCrumbs = (props) => {
             React.createElement(icon.react, { className: FAVORITE_BREADCRUMB_ICON_CLASS, tag: "span" })));
     }));
 };
-function FavoritesContainer({ visibleFavorites, manager }) {
+function FavoritesContainer({ visibleFavorites, manager, stateDB }) {
     const containerRef = React.useRef(null);
     const [isResizing, setIsResizing] = React.useState(false);
     const cursorDisposableRef = React.useRef(null);
+    const [persistedHeight, setPersistedHeight] = usePersistedHeight(stateDB);
+    const applyHeight = React.useCallback((height) => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // Height of filebrowser widget
+        const parentElement = container.closest('.jp-FileBrowser');
+        const parentRect = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getBoundingClientRect();
+        if (!parentRect) {
+            return;
+        }
+        const maxHeight = parentRect.height - BOTTOM_SPACING;
+        if (height > 24 && height < maxHeight) {
+            container.style.maxHeight = maxHeight + 'px'; // To ensure default max-height of css is overridden
+            container.style.height = height + 'px';
+        }
+    }, []);
+    // Apply persisted height when it's loaded (before paint to avoid flicker)
+    React.useLayoutEffect(() => {
+        if (persistedHeight !== undefined) {
+            applyHeight(persistedHeight);
+        }
+    }, [persistedHeight, applyHeight]);
     const handleMouseDown = () => {
         setIsResizing(true);
         cursorDisposableRef.current = Drag.overrideCursor('ns-resize');
@@ -106,20 +135,13 @@ function FavoritesContainer({ visibleFavorites, manager }) {
         if (!container) {
             return;
         }
-        // Height of filebrowser widget
-        const parentElement = container.closest('.jp-FileBrowser');
-        const parentRect = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getBoundingClientRect();
-        if (!parentRect) {
-            return;
-        }
         const rect = container.getBoundingClientRect();
         const newHeight = e.clientY - rect.top;
-        const maxHeight = parentRect.height - BOTTOM_SPACING;
-        if (newHeight > 24 && newHeight < maxHeight) {
-            container.style.maxHeight = maxHeight + 'px'; // To ensure default max-height of css is overridden
-            container.style.height = newHeight + 'px';
-        }
-    }, [isResizing]);
+        // Apply height immediately for visual feedback
+        applyHeight(newHeight);
+        // Persist to stateDB
+        setPersistedHeight(newHeight);
+    }, [isResizing, applyHeight, setPersistedHeight]);
     const handleMouseUp = React.useCallback(() => {
         var _a;
         setIsResizing(false);
@@ -144,14 +166,15 @@ function FavoritesContainer({ visibleFavorites, manager }) {
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: containerRef, className: FAVORITE_CONTAINER_CLASS }, (visibleFavorites !== null && visibleFavorites !== void 0 ? visibleFavorites : []).map(f => (React.createElement(FavoriteComponent, { key: `favorites-item-${f.path}`, favorite: f, handleClick: manager.handleClick.bind(manager) })))),
-        React.createElement("div", { className: "jp-Favorites-resize-handle", onMouseDown: handleMouseDown })));
+        React.createElement("div", { className: 'jp-Favorites-resize-handle' + (isResizing ? ' jp-mod-active' : ''), onMouseDown: handleMouseDown })));
 }
 export class FavoritesWidget extends ReactWidget {
-    constructor(manager, filebrowser) {
+    constructor(manager, filebrowser, stateDB) {
         super();
         this.pathChanged = new Signal(this);
         this.manager = manager;
         this.filebrowser = filebrowser;
+        this._stateDB = stateDB !== null && stateDB !== void 0 ? stateDB : undefined;
         this.addClass(FAVORITE_MAIN_CLASS);
         this.filebrowser.model.pathChanged.connect((_, changedArgs) => {
             const path = changedArgs.newValue;
@@ -162,7 +185,37 @@ export class FavoritesWidget extends ReactWidget {
         return (React.createElement(UseSignal, { signal: this.manager.favoritesChanged, initialSender: this.manager, initialArgs: this.manager.visibleFavorites() }, (manager, visibleFavorites) => (React.createElement("div", null,
             React.createElement(UseSignal, { signal: manager.visibilityChanged, initialSender: manager, initialArgs: manager.isVisible() }, (manager, isVisible) => isVisible && (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: FAVORITE_HEADER_CLASS }, "Favorites"),
-                React.createElement(FavoritesContainer, { visibleFavorites: visibleFavorites, manager: manager }),
+                React.createElement(FavoritesContainer, { visibleFavorites: visibleFavorites, manager: manager, stateDB: this._stateDB }),
                 React.createElement("div", { className: FILEBROWSER_HEADER_CLASS }, "File Browser"))))))));
     }
 }
+/**
+ * Custom hook to manage persisted state in stateDB.
+ * Similar to useState but automatically persists to stateDB.
+ */
+function usePersistedHeight(stateDB) {
+    const [height, setHeightState] = React.useState(undefined);
+    const initializedRef = React.useRef(false);
+    // Load initial value from stateDB before first paint
+    React.useLayoutEffect(() => {
+        if (!stateDB || initializedRef.current) {
+            return;
+        }
+        initializedRef.current = true;
+        stateDB.fetch(STATE_DB_KEY).then(result => {
+            const persistedHeight = result === null || result === void 0 ? void 0 : result.height;
+            if (typeof persistedHeight === 'number') {
+                setHeightState(persistedHeight);
+            }
+        });
+    }, [stateDB]);
+    // Setter that updates both state and stateDB
+    const setPersistedHeight = React.useCallback((newHeight) => {
+        setHeightState(newHeight);
+        if (stateDB) {
+            const state = { height: newHeight };
+            stateDB.save(STATE_DB_KEY, state);
+        }
+    }, [stateDB]);
+    return [height, setPersistedHeight];
+}

package/lib/index.js

@@ -15,6 +15,7 @@ import { ICommandPalette, InputDialog, IToolbarWidgetRegistry } from '@jupyterla
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 import { IEditorServices } from '@jupyterlab/codeeditor';
 import { StarredNotebookContentFactory } from './starPrompt';
+import { IStateDB } from '@jupyterlab/statedb';
 export { IFavorites, FAVORITE_TAG } from './token';
 const BREADCRUMBS_CLASS = 'jp-FileBrowser-crumbs';
 /**
@@ -46,9 +47,10 @@ const favorites = {
         IDefaultFileBrowser,
         IMainMenu,
         IToolbarWidgetRegistry,
-        ICommandPalette
+        ICommandPalette,
+        IStateDB
     ],
-    activate: async (app, factory, settingsRegistry, notebookTracker, translator, filebrowser, mainMenu, toolbarRegistry, palette) => {
+    activate: async (app, factory, settingsRegistry, notebookTracker, translator, filebrowser, mainMenu, toolbarRegistry, palette, stateDB) => {
         console.log('JupyterLab extension jupyterlab-favorites is activated!');
         const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
         const docRegistry = app.docRegistry;
@@ -57,7 +59,7 @@ const favorites = {
         favoritesManager.init();
         const favoriteSettings = await settingsRegistry.load(SettingIDs.favorites);
         if (filebrowser) {
-            const favoritesWidget = new FavoritesWidget(favoritesManager, filebrowser);
+            const favoritesWidget = new FavoritesWidget(favoritesManager, filebrowser, stateDB);
             const layout = filebrowser.layout;
             layout.insertWidget(0, favoritesWidget);
             const breadcrumbs = filebrowser.node.querySelector(`.${BREADCRUMBS_CLASS}`);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jlab-enhanced/favorites",
-    "version": "3.4.0",
+    "version": "3.5.0",
     "description": "Add the ability to save favorite folders to JupyterLab for quicker browsing",
     "keywords": [
         "jupyter",
@@ -80,6 +80,7 @@
         "@jupyterlab/notebook": "^4.0.5",
         "@jupyterlab/services": "^7.0.5",
         "@jupyterlab/settingregistry": "^4.0.5",
+        "@jupyterlab/statedb": "^4.0.5",
         "@jupyterlab/ui-components": "^4.0.5",
         "@lumino/commands": "^2.0.1",
         "@lumino/coreutils": "^2.0.1",

package/style/base.css

@@ -56,6 +56,10 @@
   background: var(--jp-border-color1);
 }
 
+.jp-Favorites-resize-handle.jp-mod-active {
+  background: var(--jp-brand-color1);
+}
+
 .jp-Favorites {
   flex: 0 0 auto;
   overflow: visible;