Bono - Over Engineer Extension for Bookmarks and Notes for VS Code

Bono is a premium VS Code bookmark and notes manager with hierarchical groups, color-coded gutter icons, customizable line highlights, drag-and-drop organization, and markdown annotation support. Built for developers navigating complex codebases, it features context-signature auto-healing, nested sub-group folders, rich markdown notes, linear-gradient color palettes, tree view organization, and inline note editing — all designed to keep your workspace structured and your navigation fast.

Stop losing track of critical logic. Bono ensures your annotations stay glued to the correct lines as your code moves, shifts, or changes.

✨ Features at a Glance

🎯 Advanced Code Bookmarking & Navigation

Standard bookmarking extensions track simple line numbers. If you insert a line at the top of a file, every bookmark below it points to the wrong code. Bono resolves this with an advanced Auto-Healing Context Engine:

• Context-Signature Line Tracking: The extension takes a unique hash signature of the bookmarked line and its surrounding context. If code shifts, the extension scans the file, detects the movement, and auto-heals the bookmark position.
• Context-Signature Resolution: If there are multiple identical lines (like empty lines, brackets, or imports), the extension uses surrounding lines to resolve which specific occurrence was bookmarked.
• Horizontal Scroll Preservation: When jumping to a bookmark, the editor can automatically adjust the horizontal scroll position (horizontalScrollOnJump: "dynamic") so that the bookmarked text sits right at the left edge of your screen. No more scrolling right to read indented lines.
• Precision Jump Feedback: Jumps trigger a visual Flash Highlight in the editor. Configurable smooth-scrolling animations (scrollAnimation) ease your eyes when moving within files.
• Diff & Compare View Support: Bookmark lines inside VS Code's diff editors. The extension knows whether you marked the left (original) or right (modified) side and opens the correct document pane when navigating.
• Multi-Line Bookmarks: Toggle bookmarks on continuous blocks or individual discrete ranges of lines.

🏷️ Hierarchical Bookmark Groups & Folders

Organize hundreds of bookmarks cleanly into folder structures. Keep your sidebar uncluttered and semantic:

• Unlimited Nested Sub-groups: Right-click any group and select Create Sub-group to build structures like Feature-A ❯ Bugs ❯ High-Priority.
• The Active Group ⭐: The group marked with a star is where all new bookmarks go. Switch the active group instantly via the checkmark inline action.
• Flexible Display Layouts: Toggle between a unified workspace outline tree (sidebarUI: "workspace") or separate panels for the active group and general group lists (sidebarUI: "tree").
• View Location Flexibility: Position your bookmarks view container in the dedicated Activity Bar icon (bookmarks sidebar) or nest it directly inside the default File Explorer tab (viewLocation).
• Pinned Folders & Items: Keep important groups or specific bookmark lines locked at the top of their respective lists. Pinning always places the group at the front of the pinned section for highest priority.
• Drag-and-Drop Reordering: Drag groups onto collapsed groups to reorder as siblings, or onto expanded groups to create sub-groups. Drag sub-groups to the tree root to extract them to the top level.

🔀 Drag-and-Drop & Clipboard Workflows

Enjoy a natural, desktop-like organization experience inside your editor views:

• Fluid Drag-and-Drop: Drag bookmarks to reorder their jump sequence, move them into group folders, or nest sub-group folders into parent groups.
• Group Drag Behavior: Dropping a group on a collapsed group reorders it as a sibling. Dropping on an expanded group creates a sub-group. Dropping a sub-group on the tree root extracts it to the top level.
• Clipboard Operations: Cut (Ctrl+X / Cmd+X) bookmarks or groups and paste (Ctrl+V / Cmd+V) them into another folder or root level.
• Title Bar "Paste Here": A dynamic paste button ($(reply)) appears in the tree view headers when you cut an item. This lets you paste elements even when clicking inside empty view background space.
• Single-Click vs Double-Click separation:
  • Single-clicking a bookmark opens and previews the source code line in the text editor.
  • Double-clicking tells the extension to keep keyboard focus inside the tree view. This makes it extremely fast to rename (F2) or delete (Delete) bookmarks without the text editor intercepting input.
• Undo & Redo History: Made an accidental deletion or dragged a folder to the wrong place? Press Ctrl+Z / Cmd+Z inside the tree view to undo the action, or Ctrl+Y / Cmd+Y to redo. The extension maintains a history stack of up to 50 actions.

📝 Rich Markdown Notes & Annotation System

Turn your bookmarks into interactive task trackers and documentation cards with the integrated notes system.

Bookmark & Group Notes

• Workflow Status Tracking: Assign notes a status: In Queue (Queued), WIP (Work In Progress), Blocked (Waiting on dependencies), Completed (Done), Drafted (Preserved draft), or Deleted.
• Compact Indicators: Display status badges as compact abbreviations (Q, WIP, BLK, OK, DRF) or custom symbols to fit in sidebar trees.
• Note Deletion Policies: Choose what happens when you delete a bookmark: permanently delete the note, move it to the recycle bin, preserve it for automatic re-linking, or prompt each time.
• Line Cut/Deletion Behavior: When you cut or delete a line of source code, control whether the attached note is sent to the recycle bin, deleted permanently, or preserved as an orphaned draft waiting for recovery.
• Draft & Recycle Recovery: Recycled notes are moved to a temporary bin and can be restored. Preserved drafts retain their source line, content, context, and group, and can reconnect automatically when that line is bookmarked again.
• Recycle Bin Expiry: Set notes.recycleBinRetentionSeconds to automatically delete recycled bookmark-note entries after a custom number of seconds.
• Flexible Editing Modes: Edit notes inline inside the Note Preview webview panel, or open a full native side-by-side Markdown editor. Enable autoSaveNotes to save your draft automatically as you type.

The Notes Manager

A responsive, dashboard-style card view dedicated to managing code comments, annotations, and tasks:

• Search & Filter: Search text, filter by note type (Bookmarks with notes, Bookmarks without notes, Unlinked drafts), group membership, and status codes.
• Expanded Cards: Toggle previews of the bookmarked source code and file coordinates inside each note card.
• Interactive Styling: Customize note outline glows to use standard VS Code focus themes or match the color of the bookmark's group.
• Bulk Edit: Run the BN: Edit Notes in Editor command to dump all workspace notes into a single file for rapid batch editing.

🎨 Color Themes & Visual Customizations

Make your code stand out visually. Bono features a robust styling engine for highlights and markers:

Curated Color Themes

Open the Command Palette and run BN: Apply Color Theme or click the palette icon in the tree header to apply one of the 15 built-in color schemes:

• Default Pastels: Soft, soothing colors.
• Ocean Breeze: Marine teals, deep navy, and gold accents.
• Sunset Glow: Rich golds, oranges, warm reds, and twilight purples.
• Forest: Wood browns, mossy greens, and creek teals.
• Neon Night: Electric cyan, hot magenta, and neon greens.
• Monochrome: Sleek shades of silver, slate, and charcoal.
• Candy: Sweet pinks, mint, and soft lavender.
• Fire & Ice: High-contrast warm red and freezing cyan.
• Aurora Gradients: Beautiful glowing combinations of violet, emerald, and pink.
• Sunset Gradients: Twilight blends of gold, coral, and magenta.
• Ocean Gradients: Deep sea blends of navy, teal, and seafoam.

Complete Styling Controls

• Linear Gradients: The extension supports raw CSS linear gradients for bookmarks highlights and icons. Example: linear-gradient(90deg, #ff00ff, #00ffff).
• Custom Color Themes: Add your own color arrays to bonoExtension.customColorThemes in your settings.json file.
• Dynamic Transparency: Adjust background highlight opacity using the command palette or bind keys to the increase/decrease transparency commands.
• Golden-Angle Color Generation: If you create more groups than the color theme has slots, the extension uses a golden-angle distribution algorithm to generate new colors that are mathematically as visually distinct as possible from existing groups.

🖼️ Custom Icons & SVGs

Customize the gutter icons displayed next to bookmarked lines. Use the built-in shapes or insert raw SVG code:

• Built-in Icons: Set bonoExtension.gutterIcon.bookmark for bookmark-shaped gutter icons, bonoExtension.gutterIcon.note for note-shaped gutter icons, or bonoExtension.gutterIcon.bookmarkWithNote for bookmark-plus-note combinations.
• Subtle 3D Icons: Use the 3D, outline, or bordered variants for a compact highlight-and-shadow treatment that stays clear in the gutter.
• SVG Templating: Choose custom, then set bonoExtension.gutterIcon.customSvg for one shared SVG or bonoExtension.gutterIcon.customGroupSvgs for per-group SVG overrides.
• Color Injection: Use the {color} placeholder in your SVG strings (e.g. <path fill="{color}" ... />). The extension will automatically paint the icon with the group's custom color or gradient.
• Per-Group Overrides: Specify different SVG icons for specific groups in bonoExtension.gutterIcon.customGroupSvgs.
• Bookmark + Note Composition: Set bonoExtension.gutterIcon.bookmarkWithNote to dynamic-notes-icon to generate the bookmark+note icon from the current bookmark icon and place a note badge in the bottom-right.
• Custom Bookmark Reuse: When bonoExtension.gutterIcon.customSvg is set, the dynamic bookmark+note modes reuse that custom bookmark icon as the base automatically. The older customIcon.bookmark field still works as a compatibility fallback.

📋 Display Templates

Customize how bookmarks are rendered in your tree views. Use variables and conditional checks to keep your sidebar clean:

Template Variables

• {prefix}: The line number symbol (e.g. ↳, L, 📌).
• {lineNo}: The source line number (e.g. 42). Supports lists for multi-line ranges (e.g. 5-10 or 5,7,12).
• {fileName}: The base filename (e.g. app.js).
• {filePath}: The workspace-relative file path (e.g. src/app.js).
• {content}: The text content of the bookmarked line.
• {text}: The custom name assigned to the bookmark (via Rename).
• {note}: The text content of the attached note (first line only).
• {noteIcon}: Displays a literal 📝 emoji if a note is attached.

Conditional Formatting

Wrap blocks in curly braces to render text only when conditions are met:

• {ifText:🔑 {text}}: Displays 🔑 [Name] only if a custom name is set.
• {ifNotText:...}: Renders code only if no custom name exists.
• {ifNote:...}: Appends icons or text only when a note is attached.
• {ifNotNote:...}: Renders text only when the bookmark has no note.

Custom Examples

• Default Workspace Template: {ifText:{text}}{ifNotText:{fileName}:{lineNo} {content}} | {ifNote:📝 {note}}
• Default Active Group Template: {prefix}{lineNo} {content} | {ifNote:📝 {note}}
• Minimalist Code Outline: {lineNo}: {content}{ifNote: · 📝 {note}}
• Metadata Heavy: [{fileName} L{lineNo}] {ifText:{text} · }{content}

⚙️ Settings Reference

📋 Commands Reference

⌨️ Keyboard Shortcuts

🚀 Quick Start Guide

1. Install the extension from the Visual Studio Code Marketplace.
2. Toggle a Bookmark: Open any source file, place your cursor on a line, and press Ctrl+Alt+K (or Cmd+Alt+K on macOS).
3. View Your Outline: Open the Bookmarks sidebar icon in the Activity Bar to inspect your groups.
4. Create Folders: Click the + icon in the Bookmark Groups pane title bar to create a new group. Right-click it to add nested sub-groups.
5. Cycle Through Code: Press F8 to jump to the next bookmark in your active group, or Shift+F8 to go back.
6. Add Markdown Comments: Click the outline pencil or hover over a bookmarked editor line to open the note editor, type your comments, and assign tasks (WIP, Blocked, Completed).
7. Theme Your Views: Click the palette icon in the groups tree view title bar and apply Sunset Glow or Ocean Gradients to instantly paint your folders.

💡 Developer Usage Tips

• Workflow Integration: Use status markers on bookmark notes (WIP, Blocked, Completed) to track code reviews, bug fixes, or architectural changes directly alongside your lines of code.
• Diff Navigation: When reviewing Git changes, use the extension to bookmark lines inside the diff viewer. You can jump back to them in the comparison pane later without manual file searching.
• Template Customization: Make full use of the template syntax. Try using {fileName} · {lineNo} — {content} for clean, content-focused displays in your sidebar.
• Prevent Focus Stealing: If you want to rename or delete multiple bookmarks quickly, double-click them in the tree view to lock keyboard focus inside the tree. You can then use F2 or Delete on multiple entries sequentially.
• Snapshots: Use the Export Bookmarks and Export Notes commands to save your navigation layout to a JSON file before starting major code refactoring. You can import them later to restore your work maps.

🔧 Troubleshooting & Diagnostics

If you encounter issues with line tracking or webview rendering:

1. Open VS Code Settings and set bonoExtension.debugMode: true.
2. Open the Output channel (View: Toggle Output) and select Bookmarks from the dropdown menu to inspect real-time auto-healing and event logs.
3. For packaging or testing, run npm run lint and npm test inside the repository.