@startuml state-ui
!theme plain
title sofarr — Frontend UI State Diagram

[*] --> SplashScreen : Page load

state SplashScreen {
  state "Showing splash\n(min 1.2s)" as showing
}

SplashScreen --> CheckAuth : checkAuthentication()

state CheckAuth <<choice>>
CheckAuth --> LoginForm : No session cookie
CheckAuth --> Dashboard : Valid session

state LoginForm {
  state "Idle" as lf_idle
  state "Submitting" as lf_submit
  state "Error" as lf_error

  lf_idle --> lf_submit : Submit form
  lf_submit --> lf_error : Auth failed
  lf_error --> lf_submit : Re-submit
  lf_submit --> FadeOutLogin : Auth success
}

state FadeOutLogin {
  state "CSS transition\n(opacity → 0)" as fade
}

FadeOutLogin --> SplashScreen2 : Show splash\nwhile loading

state SplashScreen2 as "Splash (loading data)" {
  state "startSSE() — awaiting\nfirst SSE message" as fetching
}

SplashScreen2 --> Dashboard : Data loaded\ndismissSplash()

state Dashboard {
  state "Rendering Cards" as rendering
  state "Status Panel Open" as status_open
  state "Status Panel Closed" as status_closed

  [*] --> rendering
  rendering --> rendering : SSE message received
→ renderDownloads()
  rendering --> rendering : Theme change

  status_closed --> status_open : Click "Status" btn
(admin only)
  status_open --> status_closed : Click close (×)
  status_open --> status_open : 5s timer
→ renderStatusPanel()

  [*] --> status_closed

  state "SSE Connection" as sse {
    state "Connecting" as sc
    state "Connected" as scon
    state "Reconnecting" as srec
    sc --> scon : First message received
    scon --> srec : Connection lost
    srec --> scon : Browser auto-reconnects
    scon --> sc : showAll toggle changed
  }
}

Dashboard --> LoginForm : Logout
(stopSSE,
clear state)

@enduml