xtralab 0.8.0 → 0.10.0

package/src/fileBrowser/icons.ts

@@ -1,7 +1,6 @@
 import { LabIcon, fileIcon } from '@jupyterlab/ui-components';
 import {
   createFileTreeIconResolver,
-  getBuiltInFileIconColor,
   getBuiltInSpriteSheet
 } from '@pierre/trees';
 import type { FileTreeIconConfig } from '@pierre/trees';
@@ -121,28 +120,104 @@ function extractSymbol(
 }
 
 /**
- * Return a JupyterLab `LabIcon` matching the icon the xtralab file tree would
- * render for the given file path. Used by other plugins (e.g. the git diff
- * viewer) that want their main-area widget tabs to display the same per-file
- * glyph the tree shows in the sidebar.
+ * Fallback colors for the built-in file icons, keyed by the icon token
+ * `@pierre/trees` resolves for a path (e.g. `python`, `typescript`).
  *
- * Resolves the symbol via the same `@pierre/trees` resolver the tree itself
- * uses, then inlines the symbol's body into a self-contained SVG so the icon
- * works outside the tree's shadow DOM. Falls back to JupyterLab's default
- * `fileIcon` when the sprite cannot be located in either sheet.
+ * The tree only exposes these as `--trees-file-icon-color-<token>` CSS
+ * variables scoped to its shadow host, so they resolve to nothing for the
+ * standalone {@link LabIcon}s {@link getTreeIcon} builds for main-area tabs.
+ * Mirroring them here lets {@link getBuiltInFileIconColor} bottom out in a
+ * real color. Each is a `light-dark(…)` pair for dark themes.
  */
-export function getTreeIcon(filePath: string): LabIcon {
+const BUILT_IN_FILE_ICON_COLOR_FALLBACKS: Record<string, string> = {
+  astro: 'light-dark(#a631be, #d568ea)',
+  babel: 'light-dark(#d5a910, #ffd452)',
+  bash: 'light-dark(#199f43, #5ecc71)',
+  biome: 'light-dark(#1a85d4, #69b1ff)',
+  bootstrap: 'light-dark(#693acf, #9d6afb)',
+  browserslist: 'light-dark(#d5a910, #ffd452)',
+  bun: 'light-dark(#594c5b, #79697b)',
+  c: 'light-dark(#1a85d4, #69b1ff)',
+  claude: 'light-dark(#d47628, #ffa359)',
+  cpp: 'light-dark(#1a85d4, #69b1ff)',
+  css: 'light-dark(#693acf, #9d6afb)',
+  database: 'light-dark(#a631be, #d568ea)',
+  default: 'light-dark(#84848a, #adadb1)',
+  docker: 'light-dark(#1a85d4, #69b1ff)',
+  eslint: 'light-dark(#693acf, #9d6afb)',
+  git: 'light-dark(#ff8c5b, #d5512f)',
+  go: 'light-dark(#1ca1c7, #68cdf2)',
+  graphql: 'light-dark(#d32a61, #ff678d)',
+  html: 'light-dark(#d47628, #ffa359)',
+  image: 'light-dark(#d32a61, #ff678d)',
+  javascript: 'light-dark(#d5a910, #ffd452)',
+  json: 'light-dark(#d47628, #ffa359)',
+  markdown: 'light-dark(#199f43, #5ecc71)',
+  mcp: 'light-dark(#17a5af, #64d1db)',
+  npm: 'light-dark(#d52c36, #ff6762)',
+  oxc: 'light-dark(#1ca1c7, #68cdf2)',
+  postcss: 'light-dark(#d52c36, #ff6762)',
+  prettier: 'light-dark(#17a5af, #64d1db)',
+  python: 'light-dark(#1a85d4, #69b1ff)',
+  react: 'light-dark(#1ca1c7, #68cdf2)',
+  ruby: 'light-dark(#d52c36, #ff6762)',
+  rust: 'light-dark(#d47628, #ffa359)',
+  sass: 'light-dark(#d32a61, #ff678d)',
+  svelte: 'light-dark(#d52c36, #ff6762)',
+  svg: 'light-dark(#d47628, #ffa359)',
+  svgo: 'light-dark(#199f43, #5ecc71)',
+  swift: 'light-dark(#d47628, #ffa359)',
+  table: 'light-dark(#17a5af, #64d1db)',
+  tailwind: 'light-dark(#1ca1c7, #68cdf2)',
+  terraform: 'light-dark(#693acf, #9d6afb)',
+  text: 'light-dark(#84848a, #adadb1)',
+  typescript: 'light-dark(#1a85d4, #69b1ff)',
+  vite: 'light-dark(#a631be, #d568ea)',
+  vscode: 'light-dark(#1a85d4, #69b1ff)',
+  vue: 'light-dark(#199f43, #5ecc71)',
+  wasm: 'light-dark(#693acf, #9d6afb)',
+  webpack: 'light-dark(#1a85d4, #69b1ff)',
+  yml: 'light-dark(#d52c36, #ff6762)',
+  zig: 'light-dark(#d47628, #ffa359)',
+  zip: 'light-dark(#d47628, #ffa359)'
+};
+
+/**
+ * Color the file tree would paint for the built-in icon `token`, as a
+ * self-contained CSS value usable outside the tree's shadow DOM: the tree's
+ * `--trees-file-icon-color-*` properties when in scope, else the literal from
+ * {@link BUILT_IN_FILE_ICON_COLOR_FALLBACKS}. Returns `undefined` for unknown
+ * tokens.
+ */
+function getBuiltInFileIconColor(token: string): string | undefined {
+  const fallback = BUILT_IN_FILE_ICON_COLOR_FALLBACKS[token];
+  if (fallback === undefined) {
+    return undefined;
+  }
+  return `var(--trees-file-icon-color-${token}, var(--trees-file-icon-color, ${fallback}))`;
+}
+
+/**
+ * Resolve a tree glyph into a standalone `LabIcon`.
+ */
+function resolveTreeIcon(filePath: string): {
+  icon: LabIcon | null;
+  specific: boolean;
+} {
   const resolved = treeIconResolver.resolveIcon(
     'file-tree-icon-file',
     filePath
   );
+  // Anything other than the catch-all glyph is specific to this file.
+  const specific =
+    resolved.token !== 'default' && resolved.name !== 'file-tree-icon-file';
   const cached = TREE_ICON_CACHE.get(resolved.name);
   if (cached !== undefined) {
-    return cached;
+    return { icon: cached, specific };
   }
   const symbol = extractSymbol(resolved.name);
   if (symbol === null) {
-    return fileIcon;
+    return { icon: null, specific };
   }
   // Built-in language icons paint with `fill="currentColor"` so the colored
   // tier of the tree can recolor them by setting `color` on the host
@@ -168,5 +243,20 @@ export function getTreeIcon(filePath: string): LabIcon {
     svgstr
   });
   TREE_ICON_CACHE.set(resolved.name, icon);
-  return icon;
+  return { icon, specific };
+}
+
+/**
+ * Return the icon the xtralab file tree would render for `filePath`.
+ */
+export function getTreeIcon(filePath: string): LabIcon {
+  return resolveTreeIcon(filePath).icon ?? fileIcon;
+}
+
+/**
+ * Like {@link getTreeIcon}, but returns `null` for the generic file glyph.
+ */
+export function getSpecificTreeIcon(filePath: string): LabIcon | null {
+  const { icon, specific } = resolveTreeIcon(filePath);
+  return specific ? icon : null;
 }

package/src/fileBrowser/index.ts

@@ -4,10 +4,14 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
+import { ICommandPalette } from '@jupyterlab/apputils';
+
 import { IDocumentManager } from '@jupyterlab/docmanager';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
+import { ITranslator } from '@jupyterlab/translation';
+
 import { populateToolbar, registerCommands } from './commands';
 import { XtralabFileBrowser } from './widget';
 
@@ -23,12 +27,14 @@ const plugin: JupyterFrontEndPlugin<void> = {
     'A path-first file browser for JupyterLab built on @pierre/trees.',
   autoStart: true,
   requires: [IDocumentManager],
-  optional: [ILayoutRestorer, ISettingRegistry],
+  optional: [ILayoutRestorer, ISettingRegistry, ICommandPalette, ITranslator],
   activate: (
     app: JupyterFrontEnd,
     docManager: IDocumentManager,
     restorer: ILayoutRestorer | null,
-    settingRegistry: ISettingRegistry | null
+    settingRegistry: ISettingRegistry | null,
+    palette: ICommandPalette | null,
+    translator: ITranslator | null
   ): void => {
     const browser = new XtralabFileBrowser({
       contentsManager: app.serviceManager.contents,
@@ -46,7 +52,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
       restorer.add(browser, browser.id);
     }
 
-    registerCommands({ app, browser });
+    registerCommands({ app, browser, docManager, palette, translator });
     populateToolbar({ app, browser });
 
     if (settingRegistry) {

package/src/fileTypeIcons/index.ts

@@ -0,0 +1,174 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { IDocumentWidgetOpener } from '@jupyterlab/docmanager';
+
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+
+import { IGitExtension } from '@jupyterlab/git';
+
+import { LabIcon } from '@jupyterlab/ui-components';
+
+import { getSpecificTreeIcon } from '../fileBrowser/icons';
+
+const PLUGIN_ID = 'xtralab:file-type-icons';
+
+/**
+ * Synthetic path used to resolve a file type's tree glyph.
+ */
+function representativePath(
+  fileType: DocumentRegistry.IFileType
+): string | null {
+  const extension = fileType.extensions?.[0];
+  if (extension === undefined || extension === '') {
+    return null;
+  }
+  // Extensions are stored with a leading dot (e.g. `.py`, `.tar.gz`).
+  return `file${extension.startsWith('.') ? extension : `.${extension}`}`;
+}
+
+/**
+ * Point a file type's icon at the tree glyph for its extension.
+ */
+function applyTreeIcon(fileType: DocumentRegistry.IFileType): void {
+  const path = representativePath(fileType);
+  if (path === null) {
+    return;
+  }
+  const icon = getSpecificTreeIcon(path);
+  if (icon === null) {
+    return;
+  }
+  // The registry owns these objects; `readonly` only blocks the type shape.
+  (fileType as { icon?: LabIcon }).icon = icon;
+}
+
+/**
+ * Source extensions with tree glyphs but no default JupyterLab file type.
+ */
+const EXTRA_FILE_TYPE_EXTENSIONS = [
+  '.ts',
+  '.tsx',
+  '.mts',
+  '.cts',
+  '.js',
+  '.jsx',
+  '.mjs',
+  '.cjs',
+  '.go',
+  '.rs',
+  '.rb',
+  '.c',
+  '.h',
+  '.cpp',
+  '.cc',
+  '.hpp',
+  '.swift',
+  '.zig',
+  '.vue',
+  '.svelte',
+  '.astro',
+  '.scss',
+  '.sass',
+  '.sh',
+  '.bash',
+  '.zsh',
+  '.graphql',
+  '.wasm'
+];
+
+/**
+ * Register icon-only file types for unclaimed source extensions.
+ */
+function registerExtraFileTypes(docRegistry: DocumentRegistry): void {
+  for (const extension of EXTRA_FILE_TYPE_EXTENSIONS) {
+    const icon = getSpecificTreeIcon(`file${extension}`);
+    if (icon === null) {
+      continue;
+    }
+    const claimed = docRegistry
+      .getFileTypesForPath(`file${extension}`)
+      .some(fileType =>
+        fileType.extensions?.some(e => e.toLowerCase() === extension)
+      );
+    if (claimed) {
+      continue;
+    }
+    docRegistry.addFileType({
+      name: `xtralab:file-type:${extension.slice(1)}`,
+      extensions: [extension],
+      icon,
+      contentType: 'file',
+      fileFormat: 'text'
+    });
+  }
+}
+
+/**
+ * Share the file browser's tree glyphs with tabs and git file lists.
+ */
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: PLUGIN_ID,
+  description:
+    "Gives the file browser's @pierre/trees glyphs to document tabs, the default file browser, and the git status panel.",
+  autoStart: true,
+  optional: [IDocumentWidgetOpener, IGitExtension],
+  activate: (
+    app: JupyterFrontEnd,
+    opener: IDocumentWidgetOpener | null,
+    gitExtension: IGitExtension | null
+  ): void => {
+    const { docRegistry } = app;
+    for (const fileType of docRegistry.fileTypes()) {
+      applyTreeIcon(fileType);
+    }
+    registerExtraFileTypes(docRegistry);
+    // Pick up file types registered after this plugin activates.
+    docRegistry.changed.connect((_, args) => {
+      if (
+        args.type === 'fileType' &&
+        args.change === 'added' &&
+        args.name !== undefined
+      ) {
+        const fileType = docRegistry.getFileType(args.name);
+        if (fileType !== undefined) {
+          applyTreeIcon(fileType);
+        }
+      }
+    });
+
+    if (opener !== null) {
+      opener.opened.connect((_, widget) => {
+        const setIcon = (): void => {
+          const icon = getSpecificTreeIcon(widget.context.path);
+          if (icon !== null) {
+            widget.title.icon = icon;
+          }
+        };
+        setIcon();
+        // Keep the tab icon right after a rename.
+        widget.context.pathChanged.connect(setIcon);
+      });
+    }
+
+    if (gitExtension !== null) {
+      gitExtension.statusChanged.connect((_, status) => {
+        for (const file of status.files) {
+          if (file.type === undefined) {
+            continue;
+          }
+          const icon = getSpecificTreeIcon(file.to);
+          if (icon === null) {
+            continue;
+          }
+          // Cross jupyterlab-git's nested `LabIcon` package boundary.
+          file.type = { ...file.type, icon } as unknown as typeof file.type;
+        }
+      });
+    }
+  }
+};
+
+export default plugin;

package/src/git/commands.ts

@@ -1,31 +1,29 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { IThemeManager } from '@jupyterlab/apputils';
+import { IThemeManager, MainAreaWidget } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { Contents } from '@jupyterlab/services';
+import { ToolbarButton, launchIcon } from '@jupyterlab/ui-components';
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
+import { ISignal, Signal } from '@lumino/signaling';
 
+import { getTreeIcon } from '../fileBrowser/icons';
+import { fileChangeToDiffModel } from './diffModel';
 import {
-  createGitDiffWidget,
-  diffWidgetId,
-  updateGitDiffWidget
+  DIFF_WIDGET_CSS_CLASS,
+  XtralabDiffWidget,
+  addDiffToolbarItems
 } from './diffWidget';
 import { IFileChange } from './tokens';
 
 /**
- * Command IDs exposed by the launcher's git diff path. The launcher
- * dashboard's "Changes" section drives {@link CommandIDs.openDiff} to open
- * its own diff tab, independent of `jupyterlab-git` (whose panel reaches
- * the same rendering via the providers in `diffProvider.tsx`).
+ * Command IDs exposed by the launcher's git diff path.
  */
 export namespace CommandIDs {
   export const openDiff = 'xtralab:git:open-diff';
 }
 
 /**
- * Argument shapes used by {@link CommandIDs.openDiff}. Cast to this type
- * inside the execute callback for type safety; the registry itself takes
- * `ReadonlyPartialJSONObject` because Lumino does not know about our
- * extension-specific shapes.
+ * Argument shapes used by {@link CommandIDs.openDiff}.
  */
 export namespace CommandArguments {
   export interface IOpenDiff {
@@ -35,44 +33,184 @@ export namespace CommandArguments {
   }
 }
 
+/**
+ * Widget id of the single, reused preview diff tab.
+ */
+export const PREVIEW_DIFF_WIDGET_ID = 'xtralab:diff:preview';
+
+/**
+ * Deterministic widget id for a pinned file/group pair.
+ */
+export function pinnedDiffWidgetId(change: IFileChange): string {
+  return `xtralab:diff:pinned:${change.group}:${change.path}`;
+}
+
+function formatTitle(change: IFileChange): string {
+  const name = change.path.split('/').pop() ?? change.path;
+  const groupLabel = change.group === 'staged' ? 'Staged' : 'Working';
+  return `${name} (${groupLabel})`;
+}
+
+/**
+ * Launcher-owned host for a shared diff widget.
+ */
+export class DiffMainAreaWidget extends MainAreaWidget<XtralabDiffWidget> {
+  constructor(
+    options: MainAreaWidget.IOptions<XtralabDiffWidget>,
+    change: IFileChange,
+    pinned: boolean
+  ) {
+    super(options);
+    this._change = change;
+    this._pinned = pinned;
+  }
+
+  get change(): IFileChange {
+    return this._change;
+  }
+
+  get pinned(): boolean {
+    return this._pinned;
+  }
+
+  pin(): void {
+    if (this._pinned) {
+      return;
+    }
+    this._pinned = true;
+    this._pinnedChanged.emit(true);
+  }
+
+  get pinnedChanged(): ISignal<this, boolean> {
+    return this._pinnedChanged;
+  }
+
+  setChange(repoPath: string, change: IFileChange): void {
+    this._change = change;
+    this.content.setModel(fileChangeToDiffModel(repoPath, change));
+    this.title.label = formatTitle(change);
+    this.title.caption = change.path;
+    this.title.icon = getTreeIcon(change.path);
+  }
+
+  private _change: IFileChange;
+  private _pinned: boolean;
+  private _pinnedChanged = new Signal<this, boolean>(this);
+}
+
+interface ICreateDiffWidgetOptions {
+  repoPath: string;
+  change: IFileChange;
+  themeManager: IThemeManager | null;
+  contentsManager: Contents.IManager;
+  rendermime: IRenderMimeRegistry | null;
+  pinned?: boolean;
+  onPinned?: (widget: DiffMainAreaWidget) => void;
+}
+
+/**
+ * Build the launcher's diff tab around the shared diff widget.
+ */
+function createDiffWidget(
+  options: ICreateDiffWidgetOptions
+): DiffMainAreaWidget {
+  const { repoPath, change, themeManager, contentsManager, rendermime } =
+    options;
+  const pinned = options.pinned === true;
+  const content = new XtralabDiffWidget(
+    fileChangeToDiffModel(repoPath, change),
+    { contentsManager, rendermime, themeManager }
+  );
+  const widget = new DiffMainAreaWidget({ content }, change, pinned);
+  widget.id = pinned ? pinnedDiffWidgetId(change) : PREVIEW_DIFF_WIDGET_ID;
+  widget.title.label = formatTitle(change);
+  widget.title.caption = change.path;
+  widget.title.closable = true;
+  widget.title.icon = getTreeIcon(change.path);
+  widget.title.className = pinned ? '' : 'jp-mod-preview';
+  widget.addClass(DIFF_WIDGET_CSS_CLASS);
+
+  const onPinned = options.onPinned ?? ((): void => undefined);
+
+  const pinButton = new ToolbarButton({
+    icon: launchIcon,
+    tooltip: 'Pin tab',
+    onClick: () => widget.pin()
+  });
+  if (widget.pinned) {
+    pinButton.hide();
+  }
+  widget.toolbar.addItem('pin', pinButton);
+  addDiffToolbarItems(widget.toolbar, content);
+
+  // Keep chrome visible only while there is a relevant toolbar control.
+  const syncToolbarVisibility = (): void => {
+    if (widget.isDisposed) {
+      return;
+    }
+    if (!widget.pinned || content.hasNotebookView || content.fileDiffActive) {
+      widget.toolbar.show();
+    } else {
+      widget.toolbar.hide();
+    }
+  };
+  const onPinnedChanged = (
+    _sender: DiffMainAreaWidget,
+    value: boolean
+  ): void => {
+    if (widget.isDisposed) {
+      return;
+    }
+    if (value) {
+      pinButton.hide();
+      onPinned(widget);
+      if (widget.isDisposed) {
+        return;
+      }
+      widget.title.className = '';
+    }
+    syncToolbarVisibility();
+  };
+  // Auto-close once a discard leaves nothing to show.
+  const onEmptied = (): void => {
+    if (!widget.isDisposed) {
+      widget.close();
+    }
+  };
+  content.hasNotebookViewChanged.connect(syncToolbarVisibility);
+  content.fileDiffActiveChanged.connect(syncToolbarVisibility);
+  content.emptied.connect(onEmptied);
+  widget.pinnedChanged.connect(onPinnedChanged);
+  syncToolbarVisibility();
+  widget.disposed.connect(() => {
+    content.hasNotebookViewChanged.disconnect(syncToolbarVisibility);
+    content.fileDiffActiveChanged.disconnect(syncToolbarVisibility);
+    content.emptied.disconnect(onEmptied);
+    widget.pinnedChanged.disconnect(onPinnedChanged);
+  });
+  return widget;
+}
+
 export interface IRegisterGitCommandsOptions {
   app: JupyterFrontEnd;
   themeManager: IThemeManager | null;
   /**
-   * Contents manager used by the diff widget to write hunk-discard
-   * results back to the working tree.
+   * Contents manager used to write hunk-discard results.
    */
   contentsManager: Contents.IManager;
   /**
-   * Rendermime registry used by the notebook diff to render outputs and
-   * markdown cells with their actual mime-type renderers (images as
-   * images, HTML as HTML, etc.). May be `null` in stripped-down hosts —
-   * the notebook diff falls back to a text representation in that case.
+   * Rendermime registry used by notebook diffs; may be `null`.
    */
   rendermime: IRenderMimeRegistry | null;
   /**
-   * Called whenever the diff widget mutates the working tree (e.g. after
-   * a hunk discard). The launcher dashboard polls git status on its own
-   * cadence and `jupyterlab-git`'s panel auto-refreshes on the contents
-   * `fileChanged` signal the save emits, so this is a hook for any extra
-   * bookkeeping rather than a required refresh.
-   */
-  onChanged: () => void;
-  /**
-   * Called for every diff widget created via the {@link CommandIDs.openDiff}
-   * command, before the widget is added to the shell. Lets the plugin track
-   * the widget for layout restoration and reveal-on-reuse.
+   * Track newly created diff widgets before they are added to the shell.
    */
-  trackDiff(widget: ReturnType<typeof createGitDiffWidget>): Promise<void>;
+  trackDiff(widget: DiffMainAreaWidget): Promise<void>;
   /**
-   * Look up an already-open diff widget for a given file change. Returns
-   * `undefined` when none is open.
+   * Look up an already-open diff widget for a file change.
    */
-  findDiff(
-    change: IFileChange,
-    pin?: boolean
-  ): ReturnType<typeof createGitDiffWidget> | undefined;
-  onPinned(widget: ReturnType<typeof createGitDiffWidget>): void;
+  findDiff(change: IFileChange, pin?: boolean): DiffMainAreaWidget | undefined;
+  onPinned(widget: DiffMainAreaWidget): void;
 }
 
 /**
@@ -87,7 +225,6 @@ export function registerGitCommands(
     themeManager,
     contentsManager,
     rendermime,
-    onChanged,
     trackDiff,
     findDiff,
     onPinned
@@ -106,18 +243,17 @@ export function registerGitCommands(
       const existing = findDiff(typed.change, pin);
       if (existing !== undefined && !existing.isDisposed) {
         if (!pin) {
-          updateGitDiffWidget(existing, typed.change);
+          existing.setChange(typed.repoPath, typed.change);
         }
         app.shell.activateById(existing.id);
         return;
       }
-      const widget = createGitDiffWidget({
+      const widget = createDiffWidget({
         repoPath: typed.repoPath,
         change: typed.change,
         themeManager,
         contentsManager,
         rendermime,
-        onChanged,
         pinned: pin,
         onPinned
       });
@@ -127,5 +263,3 @@ export function registerGitCommands(
     }
   });
 }
-
-export { diffWidgetId };