feat: summary component

[marissahuysentruyt]

Description

Adds a Summary component to display CO2 emissions data in the Results panel. The component shows the CO2 per page visit metric with a comparison to the global average, styled using the existing design system tokens.

Changes

New Component: Created Summary.js component``

• src/components/Summary.js - New reusable Summary component
• src/panels/results/results.js - Summary component integration with error handling
• src/panels/results/results.html - Added Summary container element
• src/styles/results.css - Summary component styles scoped to results panel

Validation Instructions

• Pull down the branch
• Build the project: npm run build
• Load the extension in your browser (Chrome and Firefox)
• Open the extension
• Click Analyze this page
• Verify Summary component
• The Results panel should display with a light green card at the top:

Verify the card shows:

• CO2 value (e.g., "2.4g CO₂") in large text on the left

• "per page visit" label below the CO2 value

• Comparison text (e.g., "Better than average") on the right

• Global average text below the comparison

• Verify font sizes and colors match the design decently (dark green text on light green background)

• Verify the card has rounded corners (0.5rem border radius)

• Check that the component renders with default values if no data is provided

Visual Checklist
[ ] Summary card appears in Results panel
[ ] Light green background with rounded corners
[ ] CO2 value is prominently displayed in large text
[ ] Typography hierarchy is clear (large value, smaller labels)
[ ] Colors use the green token system (dark green text on light green bg)
[ ] Layout uses two-column grid with proper spacing

[github-actions]

📦 Extension packages built successfully!

Download your Chrome and Firefox extension packages

[marissahuysentruyt]

I'd love some feedback on the styles. There's some open for discussion for sure:

• gap between the columns: should that be smaller? 🤔
• "0g CO2": should we use .heading-lg instead of xl? 🤔
• "No data yet": should we use .heading-sm instead of md? 🤔
• grid rows: think I should add explicit grid rows to more or less line up the top bits of info, and then also line up the bottom bits? 🤔

This screenshot is a smaller gap and the heading-lg and heading-sm classes, just to give an idea.