Add kty to app showcase

[grampelberg]

No description provided.

[joshka]

This seems like the sort of app that would be good to see in the showcase as it has a good amount of interactivity and solves a novel problem.

My subjective criteria for new showcase apps is that they look pretty and are easy to tell what they're doing from just an image. To achieve this, it usually means increasing the text size up from where you'd be in actual usage, reducing the image width to a max of about 1200 pixels, and trying to remove all the extraneous information not critical to seeing how the app works (e.g. running things at the console like scp). It also means giving enough time on each screen to understand it before the view changes.

Right now the text on this is a bit small, the width of the image is a bit wide, and there is a lot of information being shown, some of which seems irrelevant to showing of the main UI, and things move faster than is possible to grok the interface for a person seeing this for the first time.

Lower on the review (and optional / just something to think about), the description of what this does might be worth making about double the length (still short, but long enough to give a small amount of detail about what the app is useful for - the primary use case). The website mentions this provides a dashboad and login with github etc.

There's a few apps in the showcase that don't meet this criteria, so look at the good ones for inspiration not the ones that obviously don't.

In the meantime, let's get this up on https://github.com/ratatui/awesome-ratatui, https://forum.ratatui.rs, and mention it on the #showcase channel on discord if you're on there.

[orhun]

Yup, we need some visuals (that matches the general theme) for adding this to the showcase. Definitely send a PR to the awesome repo though!

[grampelberg]

Here's a potentially better demo. Is this closer to what y'all are looking for? It is huge, but I'm happy to do whatever suggestions you've got to make things smaller. I tried asciinema but the font/color issues are a little stark.

Thank you for the description feedback! I'll add some text about why it is a novel usage of Ratatui (PTY instead of TTY, animations, ....).

[joshka]

Yeah, I wouldn't generally suggest asciinema for that same reason :)

That's looking much neater. The font size is so much more readable. What about reducing the height a bit though? That will bring the input that the user is typing into the app a bit closer to where the main output is. Right now the input is at the bottom, but then the changes that happen are read top to bottom, so when I watch the demo, there's a lot of jumping between top and bottom to work out what's going on. This wouldn't be as big of a problem once you start using the app, because you're oriented to the app's approach, but it feels a bit disorienting when watching a demo, as you're seeing the interactions with the app for the first time. A 4:3 aspect ratio (or 16:9) is often a bit better than 1:1 for this sort of thing. Perhaps scale down to 1200x800, and then adjust the font size by a similar amount to keep the same amount of text.

Something I noticed is that there are quite a few errors shown in the flow. Perhaps focus more on the happy paths when showing off the app.

I'm not sure what the purpose of showing the command line and /etc/hosts is.

The logs page with the blank lines between each line seems a bit weird. Perhaps find a log file that looks a bit nicer without gaps (or suppress blank lines?)

Some random ideas that I think might improve the UI (caveat, I 'm not super familiar with kubernetes, so take this all with a grain of salt):

1. The logs page could do with a scrollbar
2. I noticed that some of the logs have color, if that's coming through from the source logs, it could be nice to find a good looking multi-color log (not sure if you've seen the default tracing-subscriber output, but something like that would look great.)
3. The animation transition feels like it could be a little faster - it seems like it distracts from rather than adds to the demo.
4. Consider making the focused location where the user is typing have some sort of color / border indicator (e.g. make the border thicker and colored with an attention grabbing color like red or orange, or just the bright version of the border color in use)
5. Consider making the top tab bar border link up with the middle bar by changing the borderset to include T junction lines (check the unicode line drawing block) to avoid the gap.
6. Consider putting the keyboard entry consistently at the bottom (e.g. underneath the tunnels)
7. Consider adding a title or status bar line that shows the keyboard shortcuts (maybe less than useful for real world usage, but as a demo it helps orient the user to what might be happening in the demo)

[orhun]

Also a little comment from me, you might consider removing the window controls since mostly we don't have it for the other apps in the showcase as well. Not a biggie though :)

(and damn, that tab switching animation looks sick!)

[joshka]

I was going to say something similar about the window chrome, but this seems like it would be something difficult to script using VHS well because it has live data.