Skip to content

Conversation

@carlhoerberg
Copy link
Member

Summary

  • Adds visual connection status indicator in the web UI header
  • Monitors HTTP request success/failure to track server connectivity
  • Shows green dot for connected, red dot for disconnected states
  • Responsive design hides status text on smaller screens

Changes

  • Modified static/js/http.js to track connection status and notify listeners
  • Updated static/js/layout.js to implement the connection status indicator component
  • Added CSS styling in static/main.css for the indicator with theme support
  • Updated header template to include the connection status element

Test plan

  • Test connection indicator shows "Connected" state on page load
  • Simulate network disconnection and verify indicator shows "Disconnected"
  • Test responsive behavior on mobile screens
  • Verify indicator works across different pages in the web UI
  • Check theme compatibility (light/dark modes)

Closes #1191

🤖 Generated with Claude Code

carlhoerberg and others added 2 commits July 22, 2025 22:52
- Add connection status monitoring to HTTP requests
- Display connection indicator in header with visual status
- Show connected/disconnected states with color-coded dot
- Hide status text on smaller screens for responsive design
- Provide user feedback when server connection is lost

Addresses #1191

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@carlhoerberg
Copy link
Member Author

image image

Show the exact time when connection was lost in the tooltip as
"Connection lost at [time] - Updates paused" for better user awareness.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@carlhoerberg carlhoerberg marked this pull request as ready for review July 23, 2025 21:52
@carlhoerberg carlhoerberg requested a review from a team as a code owner July 23, 2025 21:52
Comment on lines +24 to +26
function removeConnectionStatusListener (callback) {
connectionStatus.listeners.delete(callback)
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is never used as far as I can see. Remove?

@@ -1,3 +1,30 @@
const connectionStatus = {
isConnected: true,
lastSuccess: Date.now(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lastSuccess is never used, right? same functionality seems to be handled by disconnectedAt in layout.js

@viktorerlingsson
Copy link
Member

Saw a couple of things that didn't look to be used. Looks good besides that! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clear indication when UI can't communicate with server

4 participants