feat(web): UX improvements for Repo and Cluster Views

[Kai-ros]

Context

Currently the Repo and Cluster Views (my terms) are not conducive to furthering a maintainer's understanding of their project's outstanding issues at a high-level, this work aims to provide a better experience when viewing all of a given repo's issues. Further documentation will be provided in the conversation for the attached issue.

Issues Addressed:

Issue-19

TODOs:

• Scaffolding
• RepoViewToggle
• PaperStack
• WindowPane
• BookShelf
• ClusterViewPages
• Optimize
• Finalize Styling
• Edge Cases
• Rebase w/Main

Current State:

• ColumnCell (Unimplemented)
  

Open Questions:

• Port this work to the WebExt Package?
• Does this need to be responsive for mobile view?

[danielroe]

I love the suggestions here. I think maybe a 'stack' of issues (where the titles are visible but fading out) might be a nice DX. And we could also allow the option of rendering these in a grid.

[Kai-ros]

Great! To ensure clarity, I wanted to discuss a bit further to keep our mental models aligned.

Overview

So if I understood correctly, this is what you meant above, so let's get into it!

NOTE: I forgot to recreate the Duplicates button but it would still be there but I suspect that is sorta its own flow and would require its own work.

Paper Stack Design

Like I mentioned before, this design moves in the direction of iconography, which I think is actually better for this app's purpose: providing the maintainers a high-level understanding of a given repo's Issues and allowing them to drill down into specifics as they choose.

Summary Item

I provided 2 options here but I don't think Variant 2 really adds so much other than to the visual UX, maybe it "feels" nicer to use? Hard for me to say. It would end up taking up more real estate on screen but maybe that's an acceptable trade-off if you like it enough.

Repo View

This would be what replaces the existing view in the app. Attention to the new Cluster View button.

Cluster Views

NOTE: These are the views the maintainer is presented with after selecting a given Cluster.

Variant 1

This is my personal preference between the two Variants but maybe you have a strong stance against overlays? Or maybe there's too much visual noise in the background? That we could blur out though.

Variant 2

This would route them to a new page/view which is less nice in my opinion but certainly more straightforward.

Window Pane Design

I would say this is for the maintainer who wants maximum information density, lots of words, lots of shapes, lots of colors.

Summary Item

This is a bit of a rework of the previous Grid Cell design but for an individual Cluster Summary.

Repo View

This would be what replaces the existing view in the app. Attention to the new Cluster View button.

Cluster Views

NOTE: These are the views the maintainer is presented with after selecting a given Cluster.

Variant 1

This is my personal preference between the two Variants but maybe you have a strong stance against overlays? Or maybe there's too much visual noise in the background? That we could blur out though.

Variant 2

This would route them to a new page/view which is less nice in my opinion but certainly more straightforward.

Open Questions:

• Styling?
  • Will certainly try to maintain the existing styles as much as I am able but given that there will be new elements I will eventually have to make some choices so please let me know any strong opinions on buttons/text/symbols/etc as they come up.
• Duplicates View?
  • Idk for sure but I have a sense this could become its own piece of work but I think this would reveal itself as we went forward.
• Performance Impacts?
  • Just trying to look ahead and maybe either the Window Pane Design or the Cluster View Overlay could cause slow down, very much gonna leave the ball in your court on how to optimize for that if it arises though.
• Unforeseen concerns?
  • You've definitely got the better oversight on this work, feel free to make me aware of anything I should be mindful of as I move forward.
• How to decompose this work?
  • I am very happy to continue with this work but I would not want to deliver all of it in a single PR, that could take weeks, do you have a preference on this? I would break it into maybe 4 or 5 individual PRs, or it could be in a new branch with successive PRs, each implementing a new iteration progressively:
  • Scaffolding - To start I would want to rewrite the HTML/CSS of the current design to retain the existing responsiveness and working elements but to better prepare it to allow for the follow-on changes, such as a more strict componentry structure to let me better reason about it. This also serves the added benefit of more gradually introducing me to UnoCSS, so I can learn my way around it, as it is brand new to me. It just occurred to me, this better sets us up for eventually resolving Issue-17.
  • Paper Stack - New Summary Items, New Repo View, New Cluster View
  • Window Pane - New Summary Items, New Repo View, New Cluster View
  • View Toggle & Styling Pass - Swaps between the two design views, the toggle would likely be a very small amount of work but any lingering or emerging styling concerns could cause friction so I don't wanna over-promise on velocity.
  • Duplicates - Whatever extra work is needed there, hard to say for me right now.

Sorry for the wall of text/images in advance! Trying to reduce the amount of guesswork by leaning into communicating more up front. Looking forward to hearing your thoughts.

@danielroe Ping!

[Kai-ros]

@danielroe Hey, felt like I finally reached a good intermediate point to commit my changes. I updated the description at the top with some screen grabs of the current state and the TODOs I previously suggested. The gradient is very raw but I figured I'd include it so you can see, otherwise I'll let the work speak for itself. Feel free to hit me up with comments/questions/critiques. Cheers.

[Kai-ros]

CURRENT STATE:

WindowPane

• Repo View
  
• Cluster View Overlay w/o Scroll
  
• Cluster View Overlay w/Scroll

[Kai-ros]

CURRENT STATE:

PaperStack

• Repo View

- Cluster View Overlay w/o Scroll - Cluster View Overlay w/Scroll

[Kai-ros]

CURRENT STATE:

BookShelf

• Repo View
  
• Cluster View Overlay w/o Scroll
  
• Cluster View Overlay w/Scroll
  

[Kai-ros]

CURRENT STATE:

PaperStack

• Repo View Page
  
• Similar Issues View Page
  

BookShelf

• Repo View Page
  
• Similar Issues View Page
  

WindowPane

• Repo View Page
  
• Similar Issues View Page
  

[Kai-ros]

@danielroe

Hey Daniel, figured it's a good time to check in with you again on these changes since the bulk of the tasks I originally laid out are done. You can see some screens of how it's turned out in the comment above. I tried to stay true to your original minimalist design but I did diverge in some notable regards, would appreciate your feedback in order to finalize the styling. And from there I'll do what I can to optimize performance but I'm sure you'll find much more to improve on. Cheers.