xtralab 0.15.1 → 0.15.2

package/src/git/diffWidget.tsx

@@ -15,19 +15,19 @@ import type { SelectedLineRange } from '@pierre/diffs';
 import type { IAskAgent } from '../askAgent/tokens';
 
 import { buildDiffAskRequest } from './askRequest';
+import {
+  useDiffPreferences,
+  type IDiffPreferences,
+  type ImageDiffViewMode
+} from './diffPreferences';
 import {
   DIFF_WIDGET_CSS_CLASS,
   DiffStyleControl,
   DiffSurface,
+  LineWrapControl,
   NotebookViewModeControl,
   isDarkTheme,
-  isPierreTheme,
-  readStoredDiffStyle,
-  readStoredNotebookViewMode,
-  writeStoredDiffStyle,
-  writeStoredNotebookViewMode,
-  type DiffStyle,
-  type NotebookDiffViewMode
+  isPierreTheme
 } from './diffSurface';
 import { imageDataType } from './imageDiff';
 
@@ -73,6 +73,10 @@ export interface IXtralabDiffContext {
    * When available, diff line selections get an "ask an agent" gutter button.
    */
   askAgent: IAskAgent | null;
+  /**
+   * The display choices shared by all diff views.
+   */
+  preferences: IDiffPreferences;
   /**
    * The application translation bundle.
    */
@@ -90,8 +94,6 @@ export class XtralabDiffWidget
     super();
     this._model = model;
     this._context = context;
-    this._notebookViewMode = readStoredNotebookViewMode();
-    this._diffStyle = readStoredDiffStyle();
     // Reuse jupyterlab-git's host sizing while applying xtralab styling.
     this.addClass('jp-git-diff-root');
     this.addClass(DIFF_WIDGET_CSS_CLASS);
@@ -149,32 +151,6 @@ export class XtralabDiffWidget
     await done.promise;
   }
 
-  /**
-   * The current rendered-vs-JSON choice for notebook diffs.
-   */
-  get notebookViewMode(): NotebookDiffViewMode {
-    return this._notebookViewMode;
-  }
-
-  /**
-   * Set the notebook view mode and persist it.
-   */
-  setNotebookViewMode(mode: NotebookDiffViewMode): void {
-    if (mode === this._notebookViewMode) {
-      return;
-    }
-    this._notebookViewMode = mode;
-    writeStoredNotebookViewMode(mode);
-    this._notebookViewModeChanged.emit(mode);
-  }
-
-  /**
-   * A signal emitted when the notebook view mode changes.
-   */
-  get notebookViewModeChanged(): ISignal<this, NotebookDiffViewMode> {
-    return this._notebookViewModeChanged;
-  }
-
   /**
    * Whether a rendered notebook view is currently available.
    */
@@ -201,33 +177,7 @@ export class XtralabDiffWidget
   }
 
   /**
-   * The current split/unified layout for textual file diffs.
-   */
-  get diffStyle(): DiffStyle {
-    return this._diffStyle;
-  }
-
-  /**
-   * Set the diff style and persist it.
-   */
-  setDiffStyle(style: DiffStyle): void {
-    if (style === this._diffStyle) {
-      return;
-    }
-    this._diffStyle = style;
-    writeStoredDiffStyle(style);
-    this._diffStyleChanged.emit(style);
-  }
-
-  /**
-   * A signal emitted when the diff style changes.
-   */
-  get diffStyleChanged(): ISignal<this, DiffStyle> {
-    return this._diffStyleChanged;
-  }
-
-  /**
-   * Whether the Split/Unified toolbar selector currently applies.
+   * Whether the Split/Unified and line-wrap toolbar controls currently apply.
    */
   get fileDiffActive(): boolean {
     return this._fileDiffActive;
@@ -309,14 +259,8 @@ export class XtralabDiffWidget
   private _context: IXtralabDiffContext;
   private _reloadNonce = 0;
   private _pendingRefresh: PromiseDelegate<void> | null = null;
-  private _notebookViewMode: NotebookDiffViewMode;
-  private _notebookViewModeChanged = new Signal<this, NotebookDiffViewMode>(
-    this
-  );
   private _hasNotebookView = false;
   private _hasNotebookViewChanged = new Signal<this, boolean>(this);
-  private _diffStyle: DiffStyle;
-  private _diffStyleChanged = new Signal<this, DiffStyle>(this);
   private _fileDiffActive = false;
   private _fileDiffActiveChanged = new Signal<this, boolean>(this);
   private _emptied = new Signal<this, void>(this);
@@ -349,8 +293,15 @@ function ModelDiffView(props: {
 }): React.ReactElement {
   const { widget } = props;
   const model = widget.model as IXtralabDiffModel;
-  const { contentsManager, rendermime, themeManager, askAgent, trans } =
-    widget.context;
+  const {
+    contentsManager,
+    rendermime,
+    themeManager,
+    askAgent,
+    preferences,
+    trans
+  } = widget.context;
+  const values = useDiffPreferences(preferences);
   const nonce = widget.reloadNonce;
 
   const [state, setState] = React.useState<IModelDiffState>({
@@ -360,22 +311,6 @@ function ModelDiffView(props: {
     error: null
   });
 
-  const [notebookViewMode, setNotebookViewMode] =
-    React.useState<NotebookDiffViewMode>(() => widget.notebookViewMode);
-  React.useEffect(() => {
-    const handler = (
-      sender: XtralabDiffWidget,
-      mode: NotebookDiffViewMode
-    ): void => {
-      setNotebookViewMode(mode);
-    };
-    widget.notebookViewModeChanged.connect(handler);
-    setNotebookViewMode(widget.notebookViewMode);
-    return () => {
-      widget.notebookViewModeChanged.disconnect(handler);
-    };
-  }, [widget]);
-
   const handleNotebookAvailabilityChange = React.useCallback(
     (available: boolean) => {
       widget.setHasNotebookView(available);
@@ -383,19 +318,19 @@ function ModelDiffView(props: {
     [widget]
   );
 
-  const [diffStyle, setDiffStyle] = React.useState<DiffStyle>(
-    () => widget.diffStyle
+  const handleSplitRatioChange = React.useCallback(
+    (splitRatio: number) => {
+      preferences.update({ splitRatio });
+    },
+    [preferences]
+  );
+
+  const handleImageViewModeChange = React.useCallback(
+    (imageViewMode: ImageDiffViewMode) => {
+      preferences.update({ imageViewMode });
+    },
+    [preferences]
   );
-  React.useEffect(() => {
-    const handler = (sender: XtralabDiffWidget, style: DiffStyle): void => {
-      setDiffStyle(style);
-    };
-    widget.diffStyleChanged.connect(handler);
-    setDiffStyle(widget.diffStyle);
-    return () => {
-      widget.diffStyleChanged.disconnect(handler);
-    };
-  }, [widget]);
 
   const handleFileDiffActiveChange = React.useCallback(
     (active: boolean) => {
@@ -562,8 +497,13 @@ function ModelDiffView(props: {
       dark={dark}
       pierreTheme={pierre}
       rendermime={rendermime}
-      notebookViewMode={notebookViewMode}
-      diffStyle={diffStyle}
+      notebookViewMode={values.notebookViewMode}
+      diffStyle={values.diffStyle}
+      lineWrap={values.lineWrap}
+      splitRatio={values.splitRatio}
+      onSplitRatioChange={handleSplitRatioChange}
+      imageViewMode={values.imageViewMode}
+      onImageViewModeChange={handleImageViewModeChange}
       onNotebookAvailabilityChange={handleNotebookAvailabilityChange}
       onFileDiffActiveChange={handleFileDiffActiveChange}
       onMetadataChange={handleMetadataChange}
@@ -598,38 +538,27 @@ function NotebookViewModeToolbarControl(props: {
   widget: XtralabDiffWidget;
 }): React.ReactElement {
   const { widget } = props;
-  const [mode, setMode] = React.useState<NotebookDiffViewMode>(
-    () => widget.notebookViewMode
-  );
+  const { preferences, trans } = widget.context;
+  const { notebookViewMode } = useDiffPreferences(preferences);
   const [available, setAvailable] = React.useState<boolean>(
     () => widget.hasNotebookView
   );
   React.useEffect(() => {
-    const onMode = (
-      sender: XtralabDiffWidget,
-      next: NotebookDiffViewMode
-    ): void => {
-      setMode(next);
-    };
     const onAvailable = (sender: XtralabDiffWidget, next: boolean): void => {
       setAvailable(next);
     };
-    widget.notebookViewModeChanged.connect(onMode);
     widget.hasNotebookViewChanged.connect(onAvailable);
-    setMode(widget.notebookViewMode);
     setAvailable(widget.hasNotebookView);
     return () => {
-      widget.notebookViewModeChanged.disconnect(onMode);
       widget.hasNotebookViewChanged.disconnect(onAvailable);
     };
   }, [widget]);
 
-  const trans = widget.context.trans;
   return (
     <NotebookViewModeControl
-      mode={mode}
+      mode={notebookViewMode}
       available={available}
-      onChange={next => widget.setNotebookViewMode(next)}
+      onChange={next => preferences.update({ notebookViewMode: next })}
       trans={trans}
     />
   );
@@ -659,38 +588,78 @@ function DiffStyleToolbarControl(props: {
   widget: XtralabDiffWidget;
 }): React.ReactElement {
   const { widget } = props;
-  const [style, setStyle] = React.useState<DiffStyle>(() => widget.diffStyle);
-  const [available, setAvailable] = React.useState<boolean>(
-    () => widget.fileDiffActive
+  const { preferences, trans } = widget.context;
+  const { diffStyle, diffStyleControl } = useDiffPreferences(preferences);
+  const available = useFileDiffActive(widget);
+  return (
+    <DiffStyleControl
+      diffStyle={diffStyle}
+      control={diffStyleControl}
+      available={available}
+      onChange={next => preferences.update({ diffStyle: next })}
+      trans={trans}
+    />
   );
-  React.useEffect(() => {
-    const onStyle = (sender: XtralabDiffWidget, next: DiffStyle): void => {
-      setStyle(next);
-    };
-    const onAvailable = (sender: XtralabDiffWidget, next: boolean): void => {
-      setAvailable(next);
-    };
-    widget.diffStyleChanged.connect(onStyle);
-    widget.fileDiffActiveChanged.connect(onAvailable);
-    setStyle(widget.diffStyle);
-    setAvailable(widget.fileDiffActive);
-    return () => {
-      widget.diffStyleChanged.disconnect(onStyle);
-      widget.fileDiffActiveChanged.disconnect(onAvailable);
-    };
-  }, [widget]);
+}
+
+/**
+ * Line-wrap toggle mounted into a host-owned toolbar.
+ */
+class LineWrapToolbarItem extends ReactWidget {
+  constructor(widget: XtralabDiffWidget) {
+    super();
+    this._widget = widget;
+    this.addClass('jp-xtralab-DiffWidget-lineWrapToolbarItem');
+  }
+
+  /**
+   * Render the line-wrap toggle.
+   */
+  protected render(): React.ReactElement {
+    return <LineWrapToolbarControl widget={this._widget} />;
+  }
 
-  const trans = widget.context.trans;
+  private _widget: XtralabDiffWidget;
+}
+
+function LineWrapToolbarControl(props: {
+  widget: XtralabDiffWidget;
+}): React.ReactElement {
+  const { widget } = props;
+  const { preferences, trans } = widget.context;
+  const { lineWrap } = useDiffPreferences(preferences);
+  const available = useFileDiffActive(widget);
   return (
-    <DiffStyleControl
-      diffStyle={style}
+    <LineWrapControl
+      lineWrap={lineWrap}
       available={available}
-      onChange={next => widget.setDiffStyle(next)}
+      onChange={next => preferences.update({ lineWrap: next })}
       trans={trans}
     />
   );
 }
 
+/**
+ * Track {@link XtralabDiffWidget.fileDiffActive} for the split/unified and
+ * line-wrap controls.
+ */
+function useFileDiffActive(widget: XtralabDiffWidget): boolean {
+  const [active, setActive] = React.useState<boolean>(
+    () => widget.fileDiffActive
+  );
+  React.useEffect(() => {
+    const onActive = (sender: XtralabDiffWidget, next: boolean): void => {
+      setActive(next);
+    };
+    widget.fileDiffActiveChanged.connect(onActive);
+    setActive(widget.fileDiffActive);
+    return () => {
+      widget.fileDiffActiveChanged.disconnect(onActive);
+    };
+  }, [widget]);
+  return active;
+}
+
 /**
  * Structural toolbar type shared across host package boundaries.
  */
@@ -713,4 +682,5 @@ export function addDiffToolbarItems(
     new NotebookViewModeToolbarItem(widget)
   );
   toolbar.addItem('xtralab-diff-style', new DiffStyleToolbarItem(widget));
+  toolbar.addItem('xtralab-diff-line-wrap', new LineWrapToolbarItem(widget));
 }

package/src/git/imageDiff.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 import type { TranslationBundle } from '@jupyterlab/translation';
 
+import type { ImageDiffViewMode } from './diffPreferences';
+
 /**
  * xtralab's image diff, registered in place of `@jupyterlab/git:image-diff`.
  * Both sides arrive base64-encoded through the same `content()` getters used
@@ -39,30 +41,6 @@ export function imageDataType(path: string): string | null {
   return IMAGE_DATA_TYPES[lower.slice(dot)] ?? null;
 }
 
-type ImageDiffViewMode = '2-up' | 'swipe' | 'onion';
-
-const IMAGE_DIFF_VIEW_MODE_STORAGE_KEY = 'xtralab:image-diff-view-mode';
-
-function readStoredImageViewMode(): ImageDiffViewMode {
-  try {
-    const raw = window.localStorage.getItem(IMAGE_DIFF_VIEW_MODE_STORAGE_KEY);
-    if (raw === '2-up' || raw === 'swipe' || raw === 'onion') {
-      return raw;
-    }
-  } catch {
-    // localStorage can throw in privacy/sandboxed contexts.
-  }
-  return '2-up';
-}
-
-function writeStoredImageViewMode(mode: ImageDiffViewMode): void {
-  try {
-    window.localStorage.setItem(IMAGE_DIFF_VIEW_MODE_STORAGE_KEY, mode);
-  } catch {
-    // Best-effort.
-  }
-}
-
 /**
  * Strip whitespace from a base64 payload: the server's `base64.encodebytes`
  * inserts newlines some browsers reject in `data:` URLs, and the cleaned
@@ -143,6 +121,14 @@ interface IImageDiffViewProps {
    * MIME subtype from {@link imageDataType}.
    */
   fileType: string;
+  /**
+   * The selected comparison mode (host-controlled).
+   */
+  mode: ImageDiffViewMode;
+  /**
+   * Called when the user picks another comparison mode.
+   */
+  onModeChange: (mode: ImageDiffViewMode) => void;
   /**
    * Translation bundle for user-facing strings.
    */
@@ -154,7 +140,7 @@ interface IImageDiffViewProps {
  * segmented-control styling) plus the selected 2-up / swipe / onion view.
  */
 export function ImageDiffView(props: IImageDiffViewProps): React.ReactElement {
-  const { reference, challenger, fileType, trans } = props;
+  const { reference, challenger, fileType, mode, onModeChange, trans } = props;
   const ref = React.useMemo(
     () => toSide(reference, fileType),
     [reference, fileType]
@@ -164,14 +150,6 @@ export function ImageDiffView(props: IImageDiffViewProps): React.ReactElement {
     [challenger, fileType]
   );
 
-  const [mode, setMode] = React.useState<ImageDiffViewMode>(() =>
-    readStoredImageViewMode()
-  );
-  const changeMode = React.useCallback((next: ImageDiffViewMode) => {
-    setMode(next);
-    writeStoredImageViewMode(next);
-  }, []);
-
   return (
     <div className="jp-xtralab-ImageDiff">
       <div className="jp-xtralab-ImageDiff-header">
@@ -194,7 +172,7 @@ export function ImageDiffView(props: IImageDiffViewProps): React.ReactElement {
               aria-selected={mode === value}
               data-active={mode === value}
               className="jp-xtralab-DiffWidget-segmentedButton"
-              onClick={() => changeMode(value)}
+              onClick={() => onModeChange(value)}
             >
               {label}
             </button>

package/src/git/index.ts

@@ -4,6 +4,8 @@ import {
 } from '@jupyterlab/application';
 import { IThemeManager, WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 
 import { IAskAgent } from '../askAgent/tokens';
@@ -16,12 +18,50 @@ import {
   pinnedDiffWidgetId,
   registerGitCommands
 } from './commands';
+import { DiffPreferences, IDiffPreferences } from './diffPreferences';
 import diffProviderPlugin from './diffProvider';
 import { IFileChange } from './tokens';
 
 const GIT_DIFF_COMMAND_PLUGIN_ID = 'xtralab:git-diff-command';
+const GIT_DIFF_PREFERENCES_PLUGIN_ID = 'xtralab:git-diff-preferences';
 const GIT_DIFF_TRACKER_NAMESPACE = 'xtralab-git-diff';
 
+/**
+ * The display choices shared by the launcher diff and the Git panel diff.
+ */
+const diffPreferencesPlugin: JupyterFrontEndPlugin<IDiffPreferences> = {
+  id: GIT_DIFF_PREFERENCES_PLUGIN_ID,
+  description:
+    'Keeps the git diff display choices in the settings and the state database.',
+  autoStart: true,
+  provides: IDiffPreferences,
+  optional: [ISettingRegistry, IStateDB],
+  activate: (
+    app: JupyterFrontEnd,
+    settingRegistry: ISettingRegistry | null,
+    state: IStateDB | null
+  ): IDiffPreferences => {
+    const preferences = new DiffPreferences();
+    if (settingRegistry !== null) {
+      settingRegistry
+        .load(GIT_DIFF_PREFERENCES_PLUGIN_ID)
+        .then(settings => preferences.connectSettings(settings))
+        .catch(reason => {
+          console.error(
+            `xtralab: failed to load settings for ${GIT_DIFF_PREFERENCES_PLUGIN_ID}`,
+            reason
+          );
+        });
+    }
+    if (state !== null) {
+      preferences.connectState(state).catch(reason => {
+        console.error('xtralab: failed to restore the diff split', reason);
+      });
+    }
+    return preferences;
+  }
+};
+
 /**
  * The launcher's git diff command plugin. The upstream git panel stays
  * enabled; this only adds `xtralab:git:open-diff` and preview/pinned-tab
@@ -32,13 +72,20 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
   description:
     "The launcher dashboard's side-by-side git diff command, powered by @pierre/diffs.",
   autoStart: true,
-  optional: [IThemeManager, IRenderMimeRegistry, ITranslator, IAskAgent],
+  optional: [
+    IThemeManager,
+    IRenderMimeRegistry,
+    ITranslator,
+    IAskAgent,
+    IDiffPreferences
+  ],
   activate: (
     app: JupyterFrontEnd,
     themeManager: IThemeManager | null,
     rendermime: IRenderMimeRegistry | null,
     translator: ITranslator | null,
-    askAgent: IAskAgent | null
+    askAgent: IAskAgent | null,
+    preferences: IDiffPreferences | null
   ): void => {
     const trans = (translator ?? nullTranslator).load('jupyterlab');
     const tracker = new WidgetTracker<DiffMainAreaWidget>({
@@ -62,6 +109,7 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
       contentsManager: app.serviceManager.contents,
       rendermime,
       askAgent,
+      preferences: preferences ?? new DiffPreferences(),
       trans,
       trackDiff: widget => tracker.add(widget),
       onPinned: current => {
@@ -85,6 +133,7 @@ const diffCommandPlugin: JupyterFrontEndPlugin<void> = {
 };
 
 const plugins: JupyterFrontEndPlugin<unknown>[] = [
+  diffPreferencesPlugin,
   diffCommandPlugin,
   diffProviderPlugin
 ];

package/src/git/notebookDiff.tsx

@@ -13,7 +13,7 @@ import {
   type FileDiffMetadata
 } from '@pierre/diffs';
 
-import { resolveDiffTheme } from './diffTheme';
+import { DIFF_SCROLLBAR_CSS, resolveDiffTheme } from './diffTheme';
 
 const NOTEBOOK_DIFF_CSS_CLASS = 'jp-xtralab-NotebookDiff';
 
@@ -560,7 +560,8 @@ function diffLibraryOptions(theme: DiffsThemeNames, dark: boolean) {
     diffStyle: 'split' as const,
     disableFileHeader: true,
     theme,
-    themeType: dark ? ('dark' as const) : ('light' as const)
+    themeType: dark ? ('dark' as const) : ('light' as const),
+    unsafeCSS: DIFF_SCROLLBAR_CSS
   };
 }
 

package/style/git.css

@@ -50,13 +50,15 @@
 }
 
 .jp-xtralab-DiffWidget-viewModeToolbarItem,
-.jp-xtralab-DiffWidget-diffStyleToolbarItem {
+.jp-xtralab-DiffWidget-diffStyleToolbarItem,
+.jp-xtralab-DiffWidget-lineWrapToolbarItem {
   display: flex;
   align-items: center;
   font-size: var(--jp-ui-font-size0);
 }
 
-.jp-xtralab-DiffWidget-diffStyleToolbarItem {
+.jp-xtralab-DiffWidget-diffStyleToolbarItem,
+.jp-xtralab-DiffWidget-lineWrapToolbarItem {
   margin-left: 4px;
 }