Replying to Avatar Vladimir Krstić

This is super interesting. You have a column for each level, right? If that's the case, that would be a lot of horizontal scrolling and unnecessary scanning. It would be overwhelming on desktop and claustrophobic on mobile. Also, keep in mind that many desktop users don't use a trackpad or a mouse with a horizontal scroll wheel.

We should ask a question - what's the most important content a user needs to see at a glance? Probably:

- Active Problem

- Parent Problem

- Top Level Problem

What content is of medium importance? Probably:

- All parent problems (going all the way up to the top level)

- Child problems

What content is of low importance? Probably:

- Sibling problems

- Parent's sibling problems

So how would I do it?

We have a top-level problem - Problem Omega, and we are located at Problem Delta, which is buried 22 levels deep. We see these two at a glance. Between these two, we have 20 levels stacked. We don't need to scroll through all of them. We can expand and see the whole path down if we need to. Eventually, we can click on some of them, and at that moment, it becomes our active problem; it replaces Problem Delta. Now, if we jump like this, we would definitely need: navigate back, navigate forward, pin, or bookmark functionality. Below Problem Delta, we have his children. We don't have to stack them as they are below.

Here, I was thinking only about the most strip-down version, a mobile version. That's because it is easy to add things but super hard to remove them, so it's always wise to do a mobile design first.

Hope this helps. Cheers!

I was wondering who would be the first to notice that it's using carbon!

Your observations and notes here are seriously helpful and really awesome.

Have you worked with carbon before? I find it really difficult to do any frontend/design/layout stuff in general, but carbon definitely makes things easier.

Reply to this note

Please Login to reply.

Discussion

There's nothing wrong with using Carbon or any other FOSS design system. I would encourage this practice for Nostr projects as we lack designers, and developers are moving blazingly fast. Hundreds of designers worked on Carbon; it's a rock-solid product with tons of documentation. When you have isolated components in a storybook.js, it's super easy to just pick them and build your product like a Lego. You can distinguish your product with different color schemes and branding. Eventually, you can fork the storybook repo and make smaller or bigger visual changes here and there to make your product visually unique.

I've played with Carbon over the years but have never used it in an actual project. It has a very distinct tech-ish style. If you are not going for tech style, you will do better with most other design libraries with a more neutral style that is easier to iterate on.

I've never even heared of storybook so you just sent me down a rabbit hole 🤣