Dev Log: May 29 Wrap-up

Overview

Today was mostly about honesty in the UI. I spent my time making sure the dashboard doesn't lie to the user when a device goes dark.

What I Worked On

Handling "Ghost" Controls

One of the most annoying things in any smart home setup is when an app shows you a button that doesn't actually work. In my HomeAlone project, I realized the dashboard was still showing active controls even when the hardware was totally unreachable. If the front door controller or the water pump went offline, the UI would still happily present the 'Slide to Unlock' slider or the toggle buttons. You’d slide it, wait for a timeout, and then get an error. That's just frustrating.

I decided to fix that flow. Now, the app checks the device status and, if it's disconnected, I’m hiding the interactive elements entirely. I replaced them with an 'OFFLINE' badge and a simple placeholder. It's much better to tell the user "I can't do this right now" than to let them try and fail.

Visual Cues for Connectivity

It’s not just about hiding buttons; the whole card needed to feel inactive. I added a new CSS class for the offline state that dims the card's opacity and swaps the usual indigo accents for a muted red border. It’s a subtle shift, but it immediately signals that something is wrong without the user having to dig through logs.

I spent a good chunk of time tweaking the CSS to get the "dimmed" look right without making it look like the app crashed. Here is the general logic I implemented for the toggle areas:

<!-- Simplified logic for the device controls -->
<div class="widget-card" [class.widget-offline]="isDisconnected">
  <div class="header">
    <span class="badge" [class.badge-offline]="isDisconnected">
      {{ isDisconnected ? 'OFFLINE' : 'ONLINE' }}
    </span>
  </div>

  <div class="control-area">
    @if (!isDisconnected) {
      <!-- Standard interactive controls -->
      <button class="action-toggle">Perform Action</button>
    } @else {
      <!-- Muted placeholder for offline state -->
      <div class="offline-placeholder">
        <span class="warning-label">Device unreachable</span>
      </div>
    }
  </div>
</div>

It feels much more robust now. Building trust in an interface means being transparent about what is actually controllable at any given second.

Wrapping Up

It wasn't a massive feature day, but these kinds of UX Polish tasks are what make a project feel "finished." I’m happy with the red-bordered offline state—it’s punchy enough to catch the eye but doesn't feel like a scary system error. Tomorrow, I might dive into why the telemetry sync is taking a few seconds longer than I'd like. Catch you then.