- docs/ARCHITECTURE.md: full system overview, technology stack, directory structure, component architecture, data flow, auth, polling/caching, download matching pipeline, API reference, frontend architecture, configuration, deployment guide - docs/diagrams/component.puml: system component diagram - docs/diagrams/seq-auth.puml: authentication sequence diagram - docs/diagrams/seq-dashboard.puml: dashboard request sequence diagram - docs/diagrams/seq-polling.puml: background polling cycle sequence - docs/diagrams/class-server.puml: server-side class/module diagram - docs/diagrams/class-data.puml: data model / entity diagram - docs/diagrams/state-ui.puml: frontend UI state diagram - docs/diagrams/state-poller.puml: poller state diagram - docs/diagrams/activity-matching.puml: download matching activity diagram
80 lines
1.9 KiB
Plaintext
80 lines
1.9 KiB
Plaintext
@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 "fetchUserDownloads()" as fetching
|
||
}
|
||
|
||
SplashScreen2 --> Dashboard : Data loaded\ndismissSplash()
|
||
|
||
state Dashboard {
|
||
state "Rendering Cards" as rendering
|
||
state "Auto Refreshing" as refreshing
|
||
state "Status Panel Open" as status_open
|
||
state "Status Panel Closed" as status_closed
|
||
|
||
[*] --> rendering
|
||
rendering --> refreshing : startAutoRefresh()
|
||
refreshing --> rendering : fetchUserDownloads()\n→ renderDownloads()
|
||
rendering --> rendering : Theme change
|
||
|
||
status_closed --> status_open : Click "Status" btn\n(admin only)
|
||
status_open --> status_closed : Click close (×)
|
||
status_open --> status_open : Auto-refresh\nrenderStatusPanel()
|
||
|
||
[*] --> status_closed
|
||
|
||
state "Refresh Rate" as rr {
|
||
state "1s" as r1
|
||
state "5s (default)" as r5
|
||
state "10s" as r10
|
||
state "Off" as roff
|
||
r5 --> r1 : User selects
|
||
r5 --> r10
|
||
r5 --> roff
|
||
r1 --> r5
|
||
r1 --> r10
|
||
r1 --> roff
|
||
r10 --> r1
|
||
r10 --> r5
|
||
r10 --> roff
|
||
roff --> r1
|
||
roff --> r5
|
||
roff --> r10
|
||
}
|
||
}
|
||
|
||
Dashboard --> LoginForm : Logout\n(clear cookie,\nstopAutoRefresh)
|
||
|
||
@enduml
|