Show Pages/Snapshots grouped by timestamp

[ikreymer]

Changes

Whereas ReplayWebpage 1.x displays every instance of a URL, ReplayWebpage 2.0 will only display a single instance in the list.

Requirements

• Group pages by URL in the Pages and Resources (URLs) list
  • Note from Ilya: I believe this should be possible given the current page list, may need to do filtering on the client-side or can update wabac.js to group pages.

Mockups

Figma File

Tasks:

• [x] Mockups: Initial pass complete!
• [ ] Mockups: We also need to take into account search results! @Shrinks99
• [ ] #240
• [ ] #241

[Shrinks99]

Mockup with v2 UI style

Pages are listed with truncated URLs and page titles. If only one snapshot of a page exists the timestamp is shown. If multiple exist, a count is shown.

Searching should work identically as it does now for users, with the only change being that if there are multiple instances of the same URL in the file, they should be condensed into one entry in the list.

This issue may not implement everything shown here, additional UI styling work can be done at a later date. It should function as described above.