AI from Zero to App Development in 1000 Hours #23

#23: Screen Too Crowded? Then Shrink It—And Boom! Expand on Click

Quick Summary

This time, the theme is "UI tricks for elements you want to show but not obstruct." I share the journey of implementing a system where timers, prison labor tasks, and checklists are displayed compactly, then expand with a click. From failed attempts to the eventual success, this article also highlights my conversations with AI that helped refine the idea.

Want to Show It, but Not Get in the Way

When building an app, there are always UI elements that you want visible at all times—but you don't want them cluttering the screen. This time, the focus was on the “Timer” and “Prison Labor + Checklist.” You want them constantly on screen, but too big and they become a nuisance. Hide them entirely, and users won't notice them.

That’s when the idea hit me: “Can I make them small by default, and expandable when needed?”

First Attempt: Stuck in Dual-Screen Hell

My first try involved placing the list in a sidebar, which would show a panel on the right when clicked. But when I asked ChatGPT for help, it kept trying to divide the screen into two parts.

Me: “Can we go back to the original single-screen setup? No splitting.”
ChatGPT: “Understood. I’ll limit it to one screen and switch to popups.”

But when I tested it, it still felt like it was jumping to another screen—something didn’t sit right.

Me: “Instead of a sidebar, I want clicking a link on the screen itself to trigger the popup right there.”

That’s when the concept finally clicked—and we began heading in the right direction.

Implementation Begins: A Simple Small-to-Large Mechanism

The approach was simple:

• Initially display small versions of the “Timer” and “Prison Labor + Checklist” somewhere on the screen.
• When clicked, they pop up larger.
• Include a “Close” button in the popup.

Here’s the part of the code handling state management:

{
  "popupContent": null,
  "openPopup": "setPopupContent('timer' or 'taskManager')",
  "closePopup": "setPopupContent(null)"
}

In React, this is managed using useState. When popupContent is null, nothing is shown. When it's 'timer' or 'taskManager', the respective component appears as a popup.

Visual Design Matters Too

Technically, this wasn’t too hard—but how it looks really matters. The compact display shouldn’t be too flashy but should still invite clicks. I styled them like mini cards using CSS, and darkened the background of the popup slightly to help users focus.

Just "How It's Displayed" Can Change Everything

The big takeaway? How you display things can impact UX way more than what you display. I didn’t change the content—but just by changing the presentation, the whole app felt more polished.

And above all, what made me happiest was that—with some help from AI—I managed to turn my own idea into a reality.

Today's Haiku (English)

A tiny window—
Click, and the world expands wide.
Small thoughts bloom to life.