mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
Thomas Roche
313c45138c
* feat: Add Table of Contents sidebar with sticky action buttons - 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 * fix: Correct typo in opencode.json (CALUDE -> CLAUDE) * docs: Update testing documentation - separate UI tests from integration/utility tests * fix(ui): prevent code block annotation from breaking syntax highlighting - Replace surroundContents() with plain text wrapper approach - Add syntax highlighting restoration in removeHighlight() - Fixes issue reported by kkharji in PR #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. * test(ui): add comprehensive code block annotation regression tests - 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 * feat: update opencode.json to include additional documentation instructions and configure Playwright MCP * chore: stop tracking docs directory and opencode.json * chore: move UI-TESTING.md to tests directory * docs: extract UI testing checklist into separate file - 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 * docs: update UI testing documentation * fix(ui): fix TOC active section tracking 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> * revert: remove Playwright MCP from marketplace.json and stale README 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> * style(ui): compact TOC styling and fix layout shifts - 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> * feat(ui): add optional TOC and sticky actions settings - 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> * refactor(ui): redesign Settings dialog with sidebar navigation 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> * fix(ui): fix sticky action bar positioning and add scroll-aware card 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> --------- Co-authored-by: Michael Ramos <mdramos8@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Tests
This directory contains manual testing scripts for Plannotator.
UI Tests (manual/local/)
These scripts test the UI components and require a browser.
Plan review UI:
./tests/manual/local/test-hook.sh # Claude Code simulation
./tests/manual/local/test-hook-2.sh # OpenCode origin badge test
Code review UI:
./tests/manual/local/test-opencode-review.sh # Code review UI test
See UI-TESTING.md for detailed UI testing documentation.
Integration & Utility Tests (manual/local/)
These scripts test integrations, releases, and provide utilities.
Binary release testing:
./tests/manual/local/test-binary.sh # Test installed binary from ~/.local/bin/
Tests the installed plannotator binary to verify releases work correctly.
Bulk plan testing (Obsidian integration):
./tests/manual/local/test-bulk-plans.sh # Iterate through ~/.claude/plans/
Opens each .md file from ~/.claude/plans/ in Plannotator. Great for testing Obsidian integration with multiple
plans.
OpenCode integration sandbox:
./tests/manual/local/sandbox-opencode.sh [--disable-sharing] [--keep] [--no-git]
Creates a temporary sandbox with a sample React/TypeScript project, initializes git with uncommitted changes, sets up the local OpenCode plugin, and launches OpenCode for full integration testing.
Options:
--disable-sharing: Createsopencode.jsonwith sharing disabled--keep: Don't clean up sandbox on exit--no-git: Skip git initialization (tests non-git fallback)
Obsidian utility:
./tests/manual/local/fix-vault-links.sh /path/to/vault/plannotator
Adds Obsidian backlinks ([[Plannotator Plans]]) to existing plan files in your vault.
SSH Remote Testing (manual/ssh/)
Tests SSH session detection and port forwarding for remote development scenarios.
cd tests/manual/ssh/
docker-compose up -d
./test-ssh.sh
See manual/ssh/DOCKER_SSH_TEST.md for detailed setup instructions.