Replace threshold placeholder link with a real settings panel

Adds a "Loss thresholds" panel to the popup backed by the backend's
new GET/PATCH /me/settings endpoints, converting between the wire's
fractional percentages and whole-number form inputs only at that
boundary.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01RTorFQXMR9ZQtCKcMTXLHp
This commit is contained in:
2026-09-08 02:38:46 +02:00
co-authored by claude
parent ac421196e9
commit 7f8270a048
7 changed files with 335 additions and 17 deletions
+58 -4
View File
@@ -100,11 +100,65 @@ header .subtitle {
background: rgba(128, 128, 128, 0.12);
}
.thresholds-link {
.thresholds-toggle {
display: block;
width: 100%;
margin-top: 14px;
padding: 0;
border: none;
background: none;
color: inherit;
opacity: 0.5;
text-decoration: none;
pointer-events: none;
opacity: 0.75;
font: inherit;
text-align: left;
cursor: pointer;
}
.thresholds-toggle:hover {
opacity: 1;
}
.thresholds-panel {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(128, 128, 128, 0.25);
}
.thresholds-panel h2 {
margin: 0 0 8px;
font-size: 13px;
}
.thresholds-panel label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
font-size: 12px;
opacity: 0.85;
}
.threshold-input {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.threshold-input input {
width: 48px;
padding: 3px 5px;
border: 1px solid rgba(128, 128, 128, 0.4);
border-radius: 4px;
background: transparent;
color: inherit;
font: inherit;
text-align: right;
}
.thresholds-error {
margin: 4px 0 8px;
color: #dc2626;
font-size: 12px;
}