Introduction¶
The sidebar of DSH contains a “Global Panels” list consisting of: Plugins, Plugin Market, Archived Sessions, Automation Tasks, IM Bots, Worktree Space, Memory System, and More. The list items are displayed fixed and do not participate in scrolling. Therefore, when the number of entries increases or the font size becomes larger, it squeezes the workspace below. To see the workspace content, you have to modify browser styles yourself.
The dsh-sidebar-nav-scroll introduced below limits this list to half of its natural height, with the overflow part scrolling internally, saving the height for the workspace. It is maintained by Ghostdu-AI, a DSH client plugin (bundle), and only works on the Web.
What it Does¶
Mechanism: The browser-side measures the real height of each row and the real row-gap at runtime, then calculates the upper limit based on fraction. It does not hardcode pixel values, so it will not calculate incorrectly when the host changes styles.
There are a few points worth mentioning regarding the implementation:
- The natural height is accumulated by the row elements themselves and does not read
scrollHeight, so the measurement results will not affect themselves once the upper limit takes effect. - The upper limit is passed via a custom property
--dsh-sidebar-nav-scroll-capinjected into the stylesheet. When the sidebar collapses to a narrow strip, the collapse protection rule in the stylesheet can stably override it. - The list positioning does not rely on the host’s CSS Module class names: first, find any
panelRowelement, take its nearest<nav>as the panel list, and only fallback to class name matching if not found. - When the sidebar is collapsed (
[data-sidebar-collapsed]or the collapsed state class name), it automatically does not set an upper limit. - The saved height does not require extra layout patches. The sidebar panel list is
flex: none, the workspace isflex: 1, so the empty space naturally taken over by the workspace.
Installation and Usage¶
This is a DSH client plugin, dsh.client.platform = "web". Open “Plugins” -> “Installed Plugins” -> “Add Plugin” in the DSH Web sidebar, and fill in any of the following specs (installBundle accepts all syntaxes supported by pnpm add):
github:Ghostdu-AI/dsh-sidebar-nav-scroll
https://github.com/Ghostdu-AI/dsh-sidebar-nav-scroll.git
Ghostdu-AI/dsh-sidebar-nav-scroll
After installation and enabling, the sidebar’s global panel list is immediately capped, and there is no need to restart DSH.
If you want to modify the source code for development, you can clone it locally first and then use link: to point to the directory:
git clone https://github.com/Ghostdu-AI/dsh-sidebar-nav-scroll.git
# In "Add Plugin", fill in link:/absolute/path/dsh-sidebar-nav-scroll
When developing, modify client.js and save. The host will detect the change and push a new revision to the plugin, triggering a hot reload of the plugin in the browser.
Private Repository¶
Private repositories require the host to have configured the corresponding git credentials. The connectivity pre-check of installBundle (using git ls-remote) disables credential helpers and interactive prompts, so private repositories should prioritize local path installation.
Configuration¶
Click “Plugins” in the DSH Web sidebar, find “Sidebar Panel List Height Limit” in “Installed Plugins”, click the title to enter its page, and you will see the settings card:
- Height Cap (Ratio of natural height): Slider, 5%–100%
- Minimum rows to keep: Number input, 0 means unlimited
- Enable height limit: Checkbox
- Restore defaults: Clears saved values
Changes take effect immediately, and there is no need to reload the page. The card, Console API, and other tabs use the same key; any change by one side will update the sidebar height cap.
Why Configuration is Stored on the Browser Side¶
The host-side patch line cannot send configuration to the browser. dsh.client startup graph only carries id/url/rev/inject/immediately/external, so settings are stored on the browser side. The card is just a visual entry point for this storage, and the console can change it directly:
__DSH_SIDEBAR_SCROLL__.set({ fraction: 0.4, minRows: 3 }) // Change to 40% of natural height, at least 3 rows
__DSH_SIDEBAR_SCROLL__.status() // {attached,collapsed,rows,naturalHeight,capHeight}
__DSH_SIDEBAR_SCROLL__.reset() // Return to default values
The underlying storage is localStorage["dsh-sidebar-nav-scroll"], for example:
{"fraction":0.5,"minRows":2,"enabled":true}
Value range and priority:
fraction: 0.05–1.minRows: The minimum number of complete rows to display, calculating the lower bound based on measured row heights.enabled: false: Completely disable the plugin and restore the sidebar.- Priority is:
localStorage>configreceived by pluginapply(ctx, config)> Built-in defaults (fraction: 0.5,minRows: 2,enabled: true).
The settings card is registered in the plugins.bundle.config slot of the plugin page (the key is the package name of this bundle). The component is a regular React component and does not depend on the plugin’s configForms service. If the host version does not have this slot, the card will not appear, but the console interface remains usable.
Applicable Scenarios and Notes¶
Suitable for these situations:
- The sidebar’s global panel entries increase, the workspace is squeezed to a very small strip, and you don’t want to modify host styles.
- Need to adjust list height based on your own font or zoom level, rather than hardcoding pixels.
- Want conservative default values (half of natural height, at least two rows), then adjust as needed.
Notes to pay attention to:
- The plugin runs with the permissions of the current DSH process; check the source code and license (MIT) before installing.
- Only works on the Web; the built-in browser in the desktop shell is also applicable.
- Configuration is stored in
localStorageand is lost when the browser-side origin changes, consistent with other browser-side plugins. - The settings card depends on the
plugins.bundle.configslot on the plugin page, provided by version 0.1.7 and later; earlier versions only have the console interface.
Conclusion¶
This plugin solves a single-point problem: it makes the sidebar panel list collapse its height and scroll internally, returning the workspace to the user. The runtime measurement of row height and row-gap makes it stable against host style changes.
Directory page: https://www.skillhub.cn/plugins/Ghostdu-AI/dsh-sidebar-nav-scroll
GitHub: https://github.com/Ghostdu-AI/dsh-sidebar-nav-scroll