Skip to content

style: refine outline tree rendering#151

Open
Star-sumi wants to merge 4 commits into
OlaProeis:masterfrom
Star-sumi:style/outline-tree-refinement
Open

style: refine outline tree rendering#151
Star-sumi wants to merge 4 commits into
OlaProeis:masterfrom
Star-sumi:style/outline-tree-refinement

Conversation

@Star-sumi

@Star-sumi Star-sumi commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

Description

Refines the right-side outline panel into a slimmer tree-style navigation view. The rendering continues to use the existing configured accent color, so no user-specific color is hardcoded.

Related: #132

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update
  • Refactoring (no functional changes)
  • Performance improvement

Changes Made

  • Replace badge-heavy outline rows with a node-and-branch tree treatment.
  • Use the configured UI accent color for active and structural outline cues.
  • Keep semantic block colors for code, Mermaid, tables, images, and blockquotes.
  • Update outline hover text to show the item type, title, and source line directly.
  • Keep the change isolated to src/ui/outline_panel.rs.

Screenshots

If this PR includes UI changes, please add before/after screenshots:

Before After

Checklist

  • My code follows the project's code style
  • I have run cargo fmt and it produces no changes
  • I have run cargo clippy and it produces no warnings
  • I have run cargo test and all tests pass
  • I have run cargo build --release successfully
  • I have updated documentation if needed (not needed)
  • I have added tests for new functionality (focused helper coverage)
  • My changes generate no new warnings

Breaking Changes

None.

Testing

  1. git diff --check
  2. cargo check --bin ferrite

Additional Notes

cargo check --bin ferrite passes with the same three pre-existing video embed unused warnings. I did not include a broad cargo fmt run because the current tree contains unrelated formatting diffs in files outside this change; this PR avoids that noise.

Summary by CodeRabbit

  • Style
    • Redesigned the outline panel’s item layout with clearer tree guides, updated spacing, and refined typography (including heading-level-specific sizing).
    • Improved node badge and collapse/expand caret presentation with heading-aware coloring for clearer hierarchy.
    • Enhanced hover tooltips to show a more readable item type, plus the item title and line number.
  • Documentation
    • Added localized tooltip formatting for outline items (including English and Simplified Chinese).

@coderabbitai

coderabbitai Bot commented Jun 14, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e03abcec-de5b-43bc-bb78-f81ac44c82c8

📥 Commits

Reviewing files that changed from the base of the PR and between 56fe05c and 29f90d9.

📒 Files selected for processing (1)
  • locales/zh_Hans.yaml

📝 Walkthrough

Walkthrough

The outline panel item renderer is refactored from rectangle-background/level-label rendering to a bullet-and-pill layout with tree-guide vertical segments and branch connectors. Layout constants are adjusted, and font/color logic is updated. Two new helper functions (readable_item_type, item_badge_color) derive badge labels and colors from content_type. The hover tooltip is now composed dynamically from badge text, title, and line number, with new localization strings supporting the tooltip format in English and Simplified Chinese.

Changes

Outline Panel Bullet+Pill Rendering Refactor

Layer / File(s) Summary
Imports and layout constants
src/ui/outline_panel.rs
Module imports extended with ContentType to enable content-type label and color derivation; INDENT_PER_LEVEL and ITEM_HEIGHT constants updated to support new bullet-and-pill geometry.
Badge helper functions
src/ui/outline_panel.rs
readable_item_type maps OutlineItem.content_type to translated, human-readable badge labels; item_badge_color maps content-type variants to Color32 values, delegating heading colors to heading_level_color.
render_outline_item refactor, tooltip update, and localization
src/ui/outline_panel.rs, locales/en.yaml, locales/zh_Hans.yaml
Prior rectangle-background and level-label rendering replaced with bullet-and-pill positioning; indent level computed for tree-guide geometry; vertical guide segments and branch connectors drawn; conditional is_heading and content-type badge coloring applied; collapse indicator repositioned; title font sizing adjusted with level-1 special case; tooltip composed at runtime from badge text, title, and line number; localization entries item_tooltip added in English and Simplified Chinese to format outline item hover text.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 Hop hop, the outline glows,
With bullets, pills, and tidy rows,
Tree guides branch from left to right,
Badge colors guide the reader's sight,
The tooltip whispers badge and line—
Every node now looks just fine! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'style: refine outline tree rendering' directly aligns with the main changeset, which refactors outline item rendering into a tree-style structure with updated geometry and styling.
Docstring Coverage ✅ Passed Docstring coverage is 83.33% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/ui/outline_panel.rs`:
- Around line 1297-1302: The on_hover_text call is hardcoding English UI text
and using badge glyphs from item_badge_text(item) as the type identifier, which
breaks localization and makes the tooltip non-human-readable. Replace the
hardcoded format string with a localized/translated template that includes
placeholders for type, title, and line number. Create a separate readable
type-name helper function (instead of using item_badge_text which returns
glyphs) that returns a human-readable type description for each item, and use
that helper in the translated template to provide semantic meaning in the
tooltip.
- Around line 1183-1208: The tree guide visualization is missing a downward stem
that connects expandable nodes to their first child row. Currently, ancestor
columns and horizontal branches are drawn in the shown code block, but there is
no vertical line extending downward from the bullet center when a node has
children. Add a vertical line segment from bullet_center.y downward to the top
of the next row (or a reasonable distance downward) to visually connect parent
nodes to their first child. This line should only be drawn when the node is
expandable and can be added after the existing horizontal branch line drawing
code using ui.painter().line_segment with the same guide_stroke style, using the
same x position as the downward stem of the current indentation level.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3ac49a55-4958-453c-9156-6264e67c6ccb

📥 Commits

Reviewing files that changed from the base of the PR and between 3ba085c and 8a7946d.

📒 Files selected for processing (1)
  • src/ui/outline_panel.rs

Comment thread src/ui/outline_panel.rs
Comment thread src/ui/outline_panel.rs Outdated
@Star-sumi

Copy link
Copy Markdown
Contributor Author

Fresh refresh on PR 151: the latest CI run 27549542403 completed with cargo check passing on both Linux and Windows, then cargo test failing on both jobs. The first meaningful failures repeat in src/markdown/mermaid/mod.rs, and the later run also hits src/ui/productivity_panel.rs, which are outside this PR’s scope (src/ui/outline_panel.rs, locales/en.yaml, locales/zh_Hans.yaml).

I also re-ran cargo check --bin ferrite locally in the outline worktree and it passed. I’m treating the remaining red as upstream baseline, not expanding this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant