Skip to content

Feat/thoroc UI improvements#122

Open
thoroc wants to merge 10 commits intobacknotprop:mainfrom
thoroc:feat/thoroc-ui-improvements
Open

Feat/thoroc UI improvements#122
thoroc wants to merge 10 commits intobacknotprop:mainfrom
thoroc:feat/thoroc-ui-improvements

Conversation

@thoroc
Copy link

@thoroc thoroc commented Jan 30, 2026

Summary

feat: Add Table of Contents sidebar with sticky action buttons

What Changed

  • Table of Contents Sidebar - Hierarchical navigation showing H2-H5 headings with click-to-scroll
  • Active Section Tracking - Real-time highlighting of current section based on scroll position
  • Sticky Action Buttons - Images, Global comment, and Copy plan buttons stay visible while scrolling
  • Navigation Fix - Scroll-to-section now works correctly within the scrollable main container
  • Config Fix - Corrected typo in opencode.json (CALUDE → CLAUDE)

Files Added/Modified

  • packages/ui/components/TableOfContents.tsx (new)
  • packages/ui/hooks/useActiveSection.ts (new)
  • packages/ui/utils/annotationHelpers.ts (new)
  • packages/editor/App.tsx - Added TOC integration
  • packages/ui/components/Viewer.tsx - Sticky button positioning
  • opencode.json - Typo fix

Testing

Run bun run build:hook && ./tests/manual/local/test-hook.sh to verify the UI locally.

- Add hierarchical Table of Contents component with clickable navigation
- Implement useActiveSection hook for real-time section highlighting
- Add annotationHelpers utility for block identification
- Make Images, Global comment, and Copy plan buttons sticky during scroll
- Fix navigation scrolling to work within scrollable main container
@kkharji
Copy link

kkharji commented Jan 30, 2026

Screenshot 2026-01-31 at 02 32 45 Found small bug while annotating code blocks. Not sure if it's issue from my-side or unified, but once I annotate a codeblock this happens.

@thoroc
Copy link
Author

thoroc commented Jan 31, 2026

Oh that is annoying indeed. I need to look into it.

@backnotprop
Copy link
Owner

Hey guys how are we looking here. I just got back from my only vacation this year and will get these PRs going.

- Replace surroundContents() with plain text wrapper approach
- Add syntax highlighting restoration in removeHighlight()
- Fixes issue reported by kkharji in PR backnotprop#122

The old approach used range.surroundContents() which wrapped syntax-highlighted
<span> elements, creating nested structure that broke the layout. The new approach
replaces code block innerHTML with plain text wrapped in <mark>, then restores
syntax highlighting when the annotation is removed.

Test coverage: 15 tests pass with edge cases for empty blocks, special chars,
large blocks (10k), unicode, and multiple annotation cycles.
- Add 15 test cases covering code block annotation behavior
- Test plain text wrapper approach vs nested span approach
- Verify syntax highlighting restoration on annotation removal
- Cover edge cases: empty blocks, special chars, large blocks, unicode
- Add happy-dom dev dependency for DOM testing
- Move comprehensive feature checklists to UI-TESTING-CHECKLIST.md
- Keep main UI-TESTING.md focused on development workflow and setup
- Add reference link to checklist file for easy navigation
@thoroc
Copy link
Author

thoroc commented Feb 5, 2026

@kkharji this should be addressed now

Screenshot 2026-02-05 at 22 32 50

@thoroc
Copy link
Author

thoroc commented Feb 5, 2026

@backnotprop I'll let you merge this when you're happy with the changes, otherwise say the word.

@backnotprop
Copy link
Owner

really cool work. I'm testing now. I may make it a settings config as well to toggle ToC on/off

@thoroc
Copy link
Author

thoroc commented Feb 7, 2026

That's a realty good idea

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.

3 participants