feat: enhance TerminalLayout with preview actions and overflow handling#1862
feat: enhance TerminalLayout with preview actions and overflow handling#1862jarvishappy merged 1 commit intochaterm:mainfrom
Conversation
📝 WalkthroughWalkthroughThe pull request adds a reactive preview actions visibility flag to TerminalLayout.vue, computed from the active dock panel's parameters. It applies conditional CSS padding to reserve space for preview actions, updates the Dockview component configuration, and introduces test assertions to verify the implementation's presence. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/renderer/src/views/layouts/components/EditorActions.vue (1)
93-97: Redundant flex properties on absolutely-positioned element.Based on context snippet 3, this component is rendered with the
.dockview-actions-overlayclass which usesposition: absolute. Flex properties (flex: 0 0 30px,flex-shrink: 0) have no effect on absolutely-positioned elements—onlywidthandmin-widthmatter here.Additionally, there's a sizing concern: with
box-sizing: border-box, the 30px width minus 16px padding (8px each side) leaves only 14px for content, but.action-itemrequires 24px width (line 108).Proposed fix: remove ineffective properties and fix padding
.editor-actions { display: flex; align-items: center; - padding: 0 8px; + padding: 0 3px; width: 30px; min-width: 30px; - flex: 0 0 30px; - flex-shrink: 0; box-sizing: border-box; height: 35px; /* Match tab height */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/src/views/layouts/components/EditorActions.vue` around lines 93 - 97, Remove the ineffective flex rules from the absolutely-positioned overlay (delete "flex: 0 0 30px" and "flex-shrink: 0" in the EditorActions.vue style for .dockview-actions-overlay), and update sizing so .action-item can fit: with box-sizing: border-box and 8px padding each side, increase width/min-width from 30px to 40px (or otherwise ensure width >= 24px + total horizontal padding) to guarantee the .action-item 24px content fits. Reference .dockview-actions-overlay and .action-item when making these edits.src/renderer/src/views/layouts/__tests__/TerminalLayout.test.ts (1)
444-472: These string-based tests don't verify actual behavior and are fragile to refactoring.The tests only check that literal strings exist in source files (e.g.,
'has-preview-actions','computePreviewActionsVisible'), which:
- Don't verify the CSS/logic actually works or applies correctly
- Break on any refactor that changes variable/class names without functional change
- Aren't aligned with the codebase's testing approach
Given the test patterns elsewhere in this file (logic extraction with mocked objects), consider refactoring these as behavioral tests. For example, extract the
computePreviewActionsVisiblelogic and test it with mock panel states, then verify the visibility state toggles correctly.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/src/views/layouts/__tests__/TerminalLayout.test.ts` around lines 444 - 472, Replace the brittle string-existence checks with behavioral tests: locate and import (or extract) the computePreviewActionsVisible function from TerminalLayout.vue (or its composition logic) and write unit tests that feed mocked panel/editor states to computePreviewActionsVisible to assert true/false outcomes; then mount TerminalLayout (or a small wrapper) with a mocked store/props to assert the DOM/class behavior (presence of has-preview-actions class and padding-right style) and mount EditorActions to assert its container applies width/min-width 30px when preview actions are visible—use these function names (computePreviewActionsVisible, has-preview-actions, EditorActions) and mocked panel states instead of string file-content assertions.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/src/views/layouts/TerminalLayout.vue`:
- Line 222: Remove the invalid prop disable-tabs-overflow-list from the
DockviewVue usage and instead pass the scrollbars option (e.g. via the
DockviewVue :options prop) or set it per-group via the API; update the component
where disable-tabs-overflow-list is used to use DockviewVue's :options with
scrollbars: 'native' or call event.api.addGroup({ id: 'groupId', scrollbars:
'native' }) when creating groups so tabs overflow is handled by the supported
scrollbars option.
---
Nitpick comments:
In `@src/renderer/src/views/layouts/__tests__/TerminalLayout.test.ts`:
- Around line 444-472: Replace the brittle string-existence checks with
behavioral tests: locate and import (or extract) the
computePreviewActionsVisible function from TerminalLayout.vue (or its
composition logic) and write unit tests that feed mocked panel/editor states to
computePreviewActionsVisible to assert true/false outcomes; then mount
TerminalLayout (or a small wrapper) with a mocked store/props to assert the
DOM/class behavior (presence of has-preview-actions class and padding-right
style) and mount EditorActions to assert its container applies width/min-width
30px when preview actions are visible—use these function names
(computePreviewActionsVisible, has-preview-actions, EditorActions) and mocked
panel states instead of string file-content assertions.
In `@src/renderer/src/views/layouts/components/EditorActions.vue`:
- Around line 93-97: Remove the ineffective flex rules from the
absolutely-positioned overlay (delete "flex: 0 0 30px" and "flex-shrink: 0" in
the EditorActions.vue style for .dockview-actions-overlay), and update sizing so
.action-item can fit: with box-sizing: border-box and 8px padding each side,
increase width/min-width from 30px to 40px (or otherwise ensure width >= 24px +
total horizontal padding) to guarantee the .action-item 24px content fits.
Reference .dockview-actions-overlay and .action-item when making these edits.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
Run ID: 59f5219c-9172-44f7-aff2-5272d60fda5e
📒 Files selected for processing (3)
src/renderer/src/views/layouts/TerminalLayout.vuesrc/renderer/src/views/layouts/__tests__/TerminalLayout.test.tssrc/renderer/src/views/layouts/components/EditorActions.vue
| v-if="configLoaded" | ||
| ref="dockviewRef" | ||
| :class="currentTheme === 'light' ? 'dockview-theme-light' : 'dockview-theme-dark'" | ||
| :disable-tabs-overflow-list="true" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
dockview-vue disable-tabs-overflow-list prop
💡 Result:
No, there is no "disable-tabs-overflow-list" prop in dockview-vue. Official documentation at dockview.dev does not list this prop in DockviewVue options or IDockviewVueProps. Tab overflow behavior (dropdown/scroller when tabs exceed width) is handled internally by the library, with mentions in GitHub issues (#1062, #506) but no documented prop to disable the overflow list/dropdown. Customization is possible via custom tab renderers or CSS, but no direct boolean prop exists. Latest version is v5.1.0 (2026-03-02).
Citations:
- 1: https://dockview.dev/docs/api/dockview/options/
- 2: https://dockview.dev/typedocs/modules/dockview_vue.html
- 3: https://dockview.dev/docs/core/panels/tabs/
- 4: feat: add custom tab overflow rendering API mathuo/dockview#1062
- 5: https://dockview.dev/docs/api/dockview/overview
- 6: https://dockview.dev/blog/dockview-4.0.0-release
- 7: https://dockview.dev/blog/page/2/
🏁 Script executed:
# Check if the file exists and locate the line with disable-tabs-overflow-list
cd src/renderer/src/views/layouts && grep -n "disable-tabs-overflow-list" TerminalLayout.vueRepository: chaterm/Chaterm
Length of output: 125
🏁 Script executed:
# Read the context around line 222 to understand the component structure
sed -n '210,235p' src/renderer/src/views/layouts/TerminalLayout.vueRepository: chaterm/Chaterm
Length of output: 1284
🏁 Script executed:
# Check the package.json to verify the dockview-vue version used
cat package.json | grep -A 2 -B 2 "dockview-vue"Repository: chaterm/Chaterm
Length of output: 198
🌐 Web query:
dockview-vue v4.11.0 disable-tabs-overflow-list prop tabs overflow
💡 Result:
No evidence found of a prop named "disable-tabs-overflow-list" in dockview-vue v4.11.0 or any version. For handling tabs overflow in Dockview (including dockview-vue), use the scrollbars={"native"} option introduced in v4.2.0 to enable native browser scrollbars on tab headers instead of the custom JS scrollbar. This was added to address issues with custom scrolling behavior, such as touchpad scrolling conflicts and drag-and-drop problems when tabs overflow. To apply it, pass it in the Dockview options or group options via the API: In DockviewVue props or onReady event: event.api.addGroup({ id: 'myGroup', scrollbars: 'native' // or { header: 'native' } if structured that way }); or globally: This uses native scrolling, which may prevent or alter the overflow list/dropdown behavior for hidden tabs (mentioned in v4.0.0 release notes: hidden tabs accessible via dropdown). Custom overflow popover can be rendered by consumers (issue #1062). No direct disable prop confirmed; use native scrollbars or custom tab rendering/CSS to manage overflow. v4.11.0 exists per releases and includes fixes post-v4.2.0.
Citations:
- 1: https://dockview.dev/docs/api/dockview/options/
- 2: Can't drop tabs between panels (and some other issues with v4) mathuo/dockview#884
- 3: https://github.com/mathuo/dockview/releases
- 4: https://dockview.dev/blog/dockview-4.0.0-release
- 5: feat: add custom tab overflow rendering API mathuo/dockview#1062
- 6: https://dockview.dev/docs/api/dockview/overview
🏁 Script executed:
# Check if node_modules is available and if we can inspect the type definitions
if [ -d "node_modules/dockview-vue" ]; then
echo "=== dockview-vue package found ==="
cat node_modules/dockview-vue/package.json | grep '"version"'
# Search for the prop in type definitions or source
find node_modules/dockview-vue -type f -name "*.d.ts" | head -5
# Try to find any reference to disable-tabs-overflow-list
grep -r "disable-tabs-overflow-list" node_modules/dockview-vue 2>/dev/null || echo "Prop not found in node_modules"
fiRepository: chaterm/Chaterm
Length of output: 41
Remove the invalid disable-tabs-overflow-list prop and use the correct scrollbars option instead.
The disable-tabs-overflow-list prop does not exist in dockview-vue v4.11.0 (the version used in this project). To handle tabs overflow behavior, use the scrollbars option introduced in v4.2.0: either pass it to DockviewVue via :options="{ scrollbars: 'native' }" or apply it to specific groups through the API with event.api.addGroup({ id: 'groupId', scrollbars: 'native' }).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/renderer/src/views/layouts/TerminalLayout.vue` at line 222, Remove the
invalid prop disable-tabs-overflow-list from the DockviewVue usage and instead
pass the scrollbars option (e.g. via the DockviewVue :options prop) or set it
per-group via the API; update the component where disable-tabs-overflow-list is
used to use DockviewVue's :options with scrollbars: 'native' or call
event.api.addGroup({ id: 'groupId', scrollbars: 'native' }) when creating groups
so tabs overflow is handled by the supported scrollbars option.
|
❤️ Great PR @dsd2077 ❤️ Thank you for your contribution to Chaterm! The growth of this project is inseparable from community feedback and contributions like yours. We appreciate your time and effort in making Chaterm better! 🎉 |
2 participants
Related Issue
Resolves #(issue_number)
Description
Checklist
npm run lint && npm run format && npm run typecheck && npm testall pass; tests added/updated as needed.Summary by CodeRabbit
Bug Fixes
Style
Tests