refactor(tui): Improve aesthetics for helper text.

[anthonyshew]

Description

Just wanting to spruce things up a bit.

• Left-aligned the text so that it bounces around less when changing states. This is considered a generally good practice in UI design.
• Re-writing text chunks for simplicity

In the process of adjusting the text with a comma as a separator, I realized I could refactor the logic for which text to render to be a little easier to read. Isn't it great when the simplicity of the visual design is reflected in the code?!

Testing Instructions

You'll want to put the TUI into different states to see them all. Matrix is:

• Task list open/closed
• Text selected/not selected
• Task being interacted with/ not interacted with

A sample of the spirit of the changes is below.

Before

After

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
examples-basic-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-designsystem-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-gatsby-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-kitchensink-blog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-native-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-nonmonorepo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-svelte-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-tailwind-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm
examples-vite-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:59pm