style(sidebar): unify collapse arrows and tighten tree spacing#4265
Merged
Conversation
- Replace filled CaretRight triangles with line-style ArrowRight in tree.vue and treeFolder.vue, and use it as the el-tree expand icon in toc.vue, for a consistent line-arrow visual across sidebar panels. - Reduce indent step (20→6px) and base offset (20→10px) for tree folder/file rows so deep directories take less horizontal space. - Search result polish: smaller filename (12px, no bold), smaller and squarer match-count badge (10px text, 3px radius, 0 5px padding), vertically center filename with badge, and shrink the toggle arrow to 12px to match the TOC expand icon. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the sidebar UI to standardize collapsible indicators (chevrons) and reduce horizontal space usage in deep directory trees, along with small visual polish for search results and TOC expansion icons.
Changes:
- Replace filled
CaretRighttriangles withArrowRightline chevrons for tree headers, folder nodes, and TOC expand icons. - Tighten file/folder indentation in the project tree by reducing per-level padding.
- Adjust search result item typography and badge sizing, and reduce toggle icon size.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/renderer/src/components/sideBar/treeFolder.vue | Replaces folder open/close SVG with a rotating ArrowRight chevron and reduces indentation. |
| src/renderer/src/components/sideBar/treeFile.vue | Reduces indentation for file items to match the tighter tree spacing. |
| src/renderer/src/components/sideBar/tree.vue | Switches “Opened files” and project root collapse icons from CaretRight to ArrowRight. |
| src/renderer/src/components/sideBar/toc.vue | Sets Element Plus <el-tree> expand icon to ArrowRight. |
| src/renderer/src/components/sideBar/searchResultItem.vue | Updates icon (ArrowRight), icon size, filename styling, badge styling, and title alignment. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ArrowRightfrom@element-plus/icons-vue) instead of the filledCaretRighttriangle:tree.vue)treeFolder.vue) — also replaces the previousicon-folder-open / icon-folder-closeSVG with a single rotating arrow<el-tree>expand icon (toc.vuevia the:iconprop)20px → 6px, base offset20px → 10pxintreeFile.vue/treeFolder.vue, so deep directory trees take noticeably less horizontal space.searchResultItem.vue):14px → 12px, removedfont-weight: 60010pxtext,16pxheight), squarer (border-radius: 9px → 3px), with0 5pxhorizontal paddingalign-items: centerso the filename and badge align on the same axis14 → 12to match the TOC expand-icon sizesearchResultItem.vueintentionally keeps itsCaretRighttriangle — discussed and explicitly preferred there.Test plan
pnpm run typecheck— passes locallydevelop— same items should sit further left.🤖 Generated with Claude Code