feat: add results page

[arnest00]

This work adds a results panel that will eventually display analysis results. The end user can navigate between the results panel and welcome panel.

Relevant links

• BLDL-20

To validate

1. Pull down feat--add-results-page
2. Run npm i and npm run build
3. Load the extension into either Chrome or Firefox
4. Verify you can open the extension
5. On the welcome panel, verify clicking on the "Analyze this website" button opens the results panel
6. On the results panel, verify clicking on the "Analyze another website" button closes the results panel
7. Verify all panels are removed from the DOM if the welcome panel is open
8. Verify all panels are removed from the DOM if the results panel is also open

[rise-erpelding]

Functionally, this works! I can navigate from the welcome panel to the results panel and back again. I left one question about whether we still want the welcome panel open or not (it seemed like maybe not from the validation instructions?).

Also going to note that if I test this out with a smaller viewport, ie my 13" laptop screen, while Firefox (pictured) gives me a scrollbar on the welcome panel so I can access the button, with Chrome, I don't have a scrollbar and can't access the button at all. I didn't notice this on main because the welcome panel seemed to be just large enough, but it seems to be a little bigger on this branch, I think with the spacing from welcome.css now being applied? This may be out of scope for this ticket and might be worthy of a follow-up bug ticket!

[rise-erpelding]

Noting that the button from the welcome panel (and all of the other welcome panel elements) are still in the DOM when I'm on the results panel because the welcome panel is still open, would we want to remove those? Maybe over here when we open the results panel, also close the panel? (I think that may visually animate the welcome panel to slide out then slide in the results panel though, is that undesirable?)

[github-actions]

📦 Extension packages built successfully!

Download your Chrome and Firefox extension packages

[arnest00]

@rise-erpelding Thanks for taking a look! It seemed like the min-block-size might have been keeping the panels from being scrollable.

The one-panel-at-a-time problem seems to be solved, too.

Another thing to note is that on main, using the icon on the welcome panel for example, a different class is applied than expected.

<div class="cv-welcome__icon">
  🌱
</div>

.cv-panel--welcome__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

I did fix that here (and went a bit out of scope), which might explain the disrepancy.

[rise-erpelding]

This looks great! I'm able to use the buttons to navigate from the welcome panel to the results panel, and the elements on each are separate!