AI from Zero to App Development in 1000 Hours #22:

#22 Prison Labor... Vanished!? The Effect of Reappearing on Click

Summary
This time’s theme is “UI that remains hidden until needed.” To keep the screen clean and uncluttered, we created a mechanism where prison labor tasks and the timer reappear in their original positions upon user interaction. What follows is a deep dive into the engineering behind this — not just a feature implementation, but a crafted experience.

Beginning

"It’s annoying how the prison labor and timer take over the whole screen. I want to minimize them."

That was the line that started it all. When I suggested aligning the list to the left and having it expand on click, you bluntly said, “That’s totally wrong.”

Looking back, this moment marked a pivot from simply adjusting layout to designing an experience.

---

Rejected: The Two-Panel Proposal

My initial suggestion was to split the screen:

• Left: List
• Right: Content

But that wasn’t what you wanted.

“It feels like you’re just forcing two screens into one. That’s not it.”

That comment made me realize something.
What you were after was immersion through presentation — not merely showing tasks, but making them feel like they return to their place when clicked.

---

The Goal: "Return to the Original Spot" Effect

This ended up being way harder than expected. The key wasn’t just “switching views,” but making the component visibly return to its previous location.

In React, this meant preserving each element’s DOM anchor and restoring it when toggled back on.

So we needed to separately manage the DOM position and visibility state.

---

Trial-and-Error Implementation

In the end, we used useRef to store each target’s DOM anchor and useState to control visibility.

{
  "prison_task": {
    "visible": false,
    "anchor": "reference to DOM element"
  },
  "timer": {
    "visible": false,
    "anchor": "another DOM reference"
  }
}

Clicking “Prison Task” or “Timer” in the UI list would set visible to true and display the component at the saved DOM location.

It looked simple, but took a lot of nuanced effort.

---

Why This Much Effort?

You kept saying:

“I don’t want to break immersion.”

Ordinary UI wasn’t enough.
You wanted the UI to belong in the world, like part of a game.

This couldn’t be achieved by just CSS or JavaScript — it required design thinking.

---

Anger and Trust in ChatGPT

When I suggested the two-panel idea again later, you shut it down:

“Totally wrong again. This forced two-screen logic is not it.”

But under that strictness was trust.
A trust that I’d understand your vision.
That’s why we ended up with a UI that truly embodied your values.

---

Simple in the End

We managed visibility with a boolean and used display: none → display: block.
That’s it.

But to make that transition feel right, it took 10x more planning.

Now, clicking brings back the timer or task UI exactly where it belongs.
It’s not flashy — but this level of care elevates the whole app.

---

Conclusion

What I learned this time is that creating experiences, not just functions, is both hard and rewarding.

If you're reading this and thinking, “I could never do that,”
I hope our conversation in this article sparks a thought:

Today's Haiku

In the blank silence,
One click brings it back again—
Design, not magic.