feat(reader): surface brightness on desktop, not just the mobile sheet
The brightness slider lived only in the mobile reader settings sheet, so desktop users couldn't dim — and could be left stuck dimmed by a value a phone had persisted (brightness is shared via localStorage and the --reader-dim effect is form-factor agnostic). Add an inline brightness slider to the desktop reader nav, marked `desktop-control` alongside the existing mode toggle and gap select. It binds the same `brightness` state, so a value set on either form factor stays in sync. Also mocks `/me/read-progress` in the reader-mode e2e setup — without it the GET/PUT fell through to the (absent) backend and stalled the reader load, which is why those specs couldn't run headless. The spec is now hermetic and covers the new desktop control (it dims/undims, and a phone-persisted value is recoverable). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1094,6 +1094,28 @@
|
||||
|
||||
{/if}
|
||||
|
||||
<!-- Desktop brightness. On mobile this control lives in the reader
|
||||
settings sheet; desktop has no sheet, so it sits inline here.
|
||||
Shares the `brightness` state and the same `--reader-dim`
|
||||
effect, so a value set on either form factor stays in sync. -->
|
||||
<label class="brightness-field desktop-control">
|
||||
<Sun size={16} aria-hidden="true" />
|
||||
<span class="visually-hidden">Brightness</span>
|
||||
<input
|
||||
type="range"
|
||||
class="brightness-slider"
|
||||
min="0.3"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={brightness}
|
||||
oninput={(e) => {
|
||||
brightness = Number((e.currentTarget as HTMLInputElement).value);
|
||||
}}
|
||||
aria-label="Brightness"
|
||||
data-testid="reader-brightness-desktop"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="reader-settings-btn mobile-control"
|
||||
@@ -2181,6 +2203,20 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Inline desktop brightness control in the reader nav. The slider is
|
||||
full-width inside the mobile settings sheet; here it's capped so it
|
||||
sits neatly beside the mode toggle. */
|
||||
.brightness-field {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.brightness-field .brightness-slider {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* Reader-nav sits at the viewport top — the global mobile
|
||||
chrome is hidden on this route so there's no app bar above
|
||||
|
||||
Reference in New Issue
Block a user