In the DSH ecosystem, using dsh-better-sidebar allows you to view files in the Web UI. When working with long text, scrolling and locating content inside the editor can be inefficient. dsh-minimap solves this issue by overlaying a miniature text thumbnail of the entire document on the edge of the sidebar’s text editor.

Plugin Positioning

This is a plugin maintained by ping1999, designed to provide VS Code-like thumbnail navigation for the DSH Web GUI sidebar file viewer. It uses text thumbnails and a draggable viewport box to help developers quickly locate content in long files.

Core Features

  1. Thumbnail display: Overlays a miniature text thumbnail of the entire document.
  2. Viewport following: A semi-transparent viewport box follows scrolling in real time.
  3. Interactive operations:
    * Click to jump: Click any position on the thumbnail, and the editor jumps to the corresponding position.
    * Drag to locate: Hold and drag the viewport box, and the editor scrolls accordingly.
    * Hover scroll: Hover over the thumbnail and use the mouse wheel to scroll the editor equivalently.
  4. Visual adaptation: Syntax highlighting, light and dark theme support; width adapts to the sidebar (about 22% of editor width, clamped to 56–110px), and the editor content area automatically reserves a gap so long lines are not covered.
  5. Scroll mapping: Dragging to the bottom truly reaches the bottom; the proportional mapping is based on the editor’s actual scroll range.
  6. Architecture design: A pure overlay that does not modify the sidebar component; multiple tabs remain independent, and closing a tab or uninstalling the plugin completely cleans up.

Installation and Enablement

Use the following command to install the plugin:

dsh plugin --profile web add dsh-minimap

Or install from the GitHub source:

dsh plugin --profile web add github:ping1999/dsh-minimap

After installation, you must restart the web service for it to take effect:

pnpm dsh web

Compatibility note: Verified to be compatible with dsh 0.1.5-rc.2 + dsh-better-sidebar 0.19.1, and downward compatible with dsh 0.1.5-rc.1 / dsh-better-sidebar 0.19.0.

Typical Usage

  1. Open any session and open a text file in the Files sidebar on the right.
  2. The thumbnail appears on the right edge of the editor.
  3. Operations:
    * Scroll the editor -> the thumbnail’s viewport box moves synchronously.
    * Click any position on the thumbnail -> the editor jumps (viewport centered).
    * Hold and drag the viewport box -> the editor follows the scroll (supports mouse and touch).
    * Hover over the thumbnail and use the mouse wheel -> equivalent to scrolling the editor (including trackpad horizontal scrolling).

Applicable Scenarios and Notes

  • Scope of effect: Only works with CodeMirror 6 text viewers (i.e., the file viewer in dsh-better-sidebar). Images / PDFs / Markdown previews will not display a thumbnail.
  • Syntax highlighting: It is progressive; CM6 only renders visible lines, and lines receive colors only after they have scrolled into view at least once.
  • Service restart: The web service must be restarted after installation/upgrades.
  • Configuration options: No settings are currently provided.

Summary

dsh-minimap provides a global overview capability for DSH’s Web file viewing. Through a simple overlay implementation, it significantly improves browsing efficiency for long text files without modifying the sidebar component.

Plugin directory | GitHub repository