Feat/thoroc UI improvements by thoroc · Pull Request #122 · backnotprop/plannotator

thoroc · 2026-01-30T20:38:23Z

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

…on/utility tests

kkharji · 2026-01-30T23:34:52Z

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 · 2026-01-31T20:53:49Z

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

backnotprop · 2026-02-05T17:48:56Z

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

…ctions and configure Playwright MCP

- 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 · 2026-02-05T22:32:13Z

@kkharji this should be addressed now

thoroc · 2026-02-05T22:34:38Z

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

backnotprop · 2026-02-07T18:30:39Z

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

thoroc · 2026-02-07T19:11:41Z

That's a realty good idea

IntersectionObserver was using root: null (viewport) instead of the actual scroll container (<main>), and the effect only ran on mount before headings were rendered. Pass the container as root and re-run the observer when heading count changes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backnotprop · 2026-02-08T18:35:33Z

Pushed a fix for the TOC active section tracking (dc497ba).

Two issues in useActiveSection.ts:

Wrong observer root — IntersectionObserver was using root: null (viewport), but content scrolls inside the <main> element. Changed to root: container.
Observer never initialized — The effect ran on mount before the plan loaded, found 0 headings, and early-returned. Since the dependency array ([containerRef]) never changes, it never re-ran. Added headingCount as a dependency so the observer re-initializes when headings render.

…links Playwright MCP is dev tooling, not for end users. README referenced docs/UI-TESTING.md and docs/CODE-STYLE.md which don't exist at those paths. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backnotprop · 2026-02-08T18:41:17Z

Also reverted two unrelated changes (5cf22c5):

.claude-plugin/marketplace.json — Removed Playwright MCP server config. This is dev tooling and shouldn't ship to end users via the marketplace install.
README.md — Removed Contributing section that linked to docs/UI-TESTING.md and docs/CODE-STYLE.md which don't exist at those paths.

- Smaller text (text-xs) and tighter padding for compact feel - Remove border-l-2 and font-medium from active state to prevent layout shifts that pushed text into multiline - Annotation count badges are now perfect circles (w-5 h-5) - Add left padding to root-level heading Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backnotprop · 2026-02-08T18:55:45Z

TOC styling tweaks (5ed11db):

Compact layout — smaller text and tighter padding
Fixed layout shifts — removed border-l-2 and font-medium from active state, which were causing text to reflow when scrolling between sections. Active state is now just a subtle background tint.
Annotation badges — fixed to perfect circles (w-5 h-5) instead of oval pills
Root heading padding — added left padding so the plan title isn't flush against the edge

- New uiPreferences.ts utility for cookie-based persistence - TOC toggle: conditionally renders sidebar in App.tsx - Sticky Actions toggle: conditionally applies sticky positioning in Viewer.tsx - Both default to enabled, persisted via cookies Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace flat settings list with sidebar + content panel layout: - General tab: Identity, Permission Mode, Agent Switching - Display tab: TOC, Sticky Actions, Tater Mode - Saving tab: Plan Saving, Obsidian, Bear Notes - Scrollable content area (max-h-[70vh]) - Sidebar hidden in review mode (single tab) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backnotprop · 2026-02-08T19:19:40Z

Additional commits pushed

feat(ui): add optional TOC and sticky actions settings (9f6e0ce)

Added uiPreferences.ts with cookie-based persistence for TOC and sticky actions toggles
TOC and sticky action buttons are now configurable via Settings (enabled by default)
Wired preferences through App.tsx → Viewer.tsx with stickyActions prop

refactor(ui): redesign Settings dialog with sidebar navigation (7714551)

Settings dialog was getting cluttered with 9+ settings in a flat list
Redesigned with sidebar + content panel layout (macOS System Settings style)
Three tabs: General (Identity, Permission Mode, Agent Switching), Display (TOC, Sticky Actions, Tater Mode), Saving (Plan Saving, Obsidian, Bear Notes)
Sidebar auto-hides in review mode (only General settings visible)
Scrollable content area with max-h-[70vh]

…background Match main's button positioning across all breakpoints with responsive margins that account for article padding. Use IntersectionObserver sentinel to detect when the bar is stuck, revealing the card background only on scroll. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backnotprop · 2026-02-08T19:44:35Z