Skip to main content

UI Overview

The ChartLense sidebar is designed to be space-efficient and intuitive. It consists of three main sections: the Header, the Main Content area, and the Footer.

ChartLense Sidebar Interface

The complete ChartLense interface showing all key components and the clean, professional design

┌─────────────────────────────────────┐
│ HEADER (Sticky)                     │
├─────────────────────────────────────┤
│ MAIN CONTENT (Scrollable)           │
│ ┌─ Quota Display ─────────────────┐ │
│ │ Plan Badge + Subscription Info  │ │
│ │ Upgrade Button + Boost Info     │ │
│ └─────────────────────────────────┘ │
│ ┌─ Control Section ───────────────┐ │
│ │ Analyze Button + Disclaimer     │ │
│ └─────────────────────────────────┘ │
│ ┌─ Results (Dynamic) ─────────────┐ │
│ │ Analysis Output                 │ │
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ FOOTER (Fixed)                      │
└─────────────────────────────────────┘

The dark blue header at the top provides access to key functions. In the screenshot above, you can see the ChartLense logo on the left and the navigation icons on the right:

  • 📖 Guide: A link to this user guide.
  • ✉️ Feedback: Opens a modal to send us your feedback.
  • ⚙️ Privacy: Opens the privacy settings, including the blackout tool.
  • 👤 Account: Dynamic button that changes based on authentication state:
    • Unauthenticated: Shows "Login" - opens authentication modal
    • Authenticated: Shows your email - opens dropdown with plan info and logout option

Main Content​

This is the primary interaction area, shown in the light gray section of the screenshot. The content changes based on your authentication state:

Unauthenticated State (Screenshot Above)​

  • Quota Display: Shows FREE plan badge with "Sub: 0/0, Boost: 0"
  • Main Button: "Log in to Analyze" (prompts login when clicked)
  • Status: Extension installed but registration incomplete

Authenticated State​

  • Quota Display: FREE plan badge with "Sub: 5/5, Boost: 0" (daily quota available)
  • Main Button: "Analyze this chart" (functional for chart analysis)
  • Quota Refresh: Shows "Refr: Xh" indicating daily reset time
  • Status: Fully functional for chart analysis

During Registration​

  • Registration Modal: Overlays main interface during email verification
  • Email Status: Shows verification progress and resend options
  • Privacy Consent: Required agreement before activation

Analysis Results​

  • Results Section: Appears below main content after analysis
  • Feedback Controls: Thumbs up/down buttons for rating analysis quality
  • Analysis History: Previous analysis accessible through interface

The footer contains:

  • Feedback Controls (👍 / 👎): These appear after an analysis is complete, allowing you to rate its quality.
  • Version Number: Shows the current version of the extension.
  • Legal Links: Links to our Privacy Policy and Terms of Service.