Sidebar Interface

The Pointa sidebar is your central hub for all features. It provides quick access to annotations, bug reports, design changes, and more.

Overview

The sidebar includes:

  • Server connection status
  • Action buttons (Annotate, Report Issue, Ask AI, Sync to Linear)
  • Annotation list with filtering
  • To Review notification center
  • Page/route navigation
  • Theme support (light/dark)

Opening and Closing

Open the Sidebar

  • Click the Pointa extension icon in your Chrome toolbar
  • Use keyboard shortcut (if configured)

Close the Sidebar

  • Click the extension icon again
  • Click outside the sidebar
  • Press Escape

The sidebar slides in from the right side of the page without disrupting your layout.

Sidebar Sections

Server Status

At the top, you'll see the connection status:

  • Green indicator: Server connected, ready to use
  • Red indicator: Server not detected

If the server isn't connected, click the status to see troubleshooting tips.

Action Buttons

Quick access to all Pointa features:

Button Feature Description
Annotate Annotations Click elements and add feedback or edit styles visually
Report Issue Bug & Performance Reporting Record bug sessions or performance investigations
Ask AI AI Integration Send annotations to your connected AI tool
Sync to Linear Linear Integration Sync annotations and issues to Linear

To Review

A dedicated notification center for reviewing AI-completed work:

  • Shows all annotations in "in-review" status
  • Grouped by page
  • Cross-page navigation

Annotations List

The main area shows annotations for the current page:

Active Tab

  • Pending annotations waiting for AI
  • Click any annotation to view/edit
  • Badge numbers match on-page indicators

To Review Tab

  • Annotations AI has completed
  • Ready for your review
  • Mark as done or add follow-up

Page Navigation

Your application may have multiple routes/pages with annotations.

Current Page

By default, the sidebar shows annotations for the current URL.

Page Dropdown

Click the page selector to:

  • See all pages with annotations
  • Switch to view annotations on other routes
  • See annotation counts per page

All Pages View

Select "All Pages" to see every annotation across your project.

Theme Support

Pointa supports light and dark modes:

Automatic

By default, Pointa matches your system preference.

Manual Override

Click the theme toggle (sun/moon icon) to switch modes.

The theme affects:

  • Sidebar background and text
  • Badge colors
  • Modal overlays

Resizing the Sidebar

The sidebar can be resized:

  1. Hover over the left edge of the sidebar
  2. Your cursor changes to a resize handle
  3. Drag left to make it wider, right to make it narrower

The width persists across page reloads.

Badge Indicators

On-page badges show which elements have annotations:

Badge Numbers

Each badge shows a number matching the annotation list order.

Badge Positioning

Badges automatically position to:

  • Stay visible on screen
  • Not overlap with element content
  • Adjust when sidebar opens/closes

Clicking Badges

Click any badge to:

  • Scroll to that annotation in the sidebar
  • Open the annotation for editing
  • View the full conversation

Quick Actions

Copy Annotation

Copy annotation details to clipboard for sharing or reference.

Delete Annotation

Remove an annotation permanently. This cannot be undone.

Mark as Done

After reviewing AI's work, mark the annotation as complete.

Add Follow-up

Add additional comments to continue the conversation with AI.

Keyboard Navigation

Key Action
Escape Close active modal or exit current mode
Click outside Close sidebar

Tips for Using the Sidebar

Keep It Open While Working

Leave the sidebar open to quickly add annotations as you review your UI.

Use Page Filtering

Focus on one page at a time to avoid overwhelm on large projects.

Check the Review Tab

Regularly check "To Review" to verify AI's implementations.

Collapse When Coding

Close the sidebar when you need full screen width for coding.

Related Features