thegeneralist01/archivr
1
Fork 0
mirror of https://github.com/thegeneralist01/archivr synced 2026-07-21 18:55:36 +02:00
Code Issues Activity

fix(frontend): move playlist expand chevron to left of input

Browse source 
User asked for the chevron to be on the left of the playlist input,
not tucked after the quality selector on the right.

- Remove chevron from qualityEl (it was between the quality select and
  the remove button)
- Add it as the first child of capture-row-main, before the <input>,
  when isPlaylistSource && playlistProbeState === 'done'
- Show a same-width placeholder span while probing/idle/error so the
  input does not jump left when the chevron appears after probe completes
- Add capture-playlist-toggle--left modifier (flex-shrink:0, tighter
  padding) and .capture-playlist-toggle-placeholder (fixed 22px width)
This commit is contained in:
TheGeneralist 2026-07-20 23:02:49 +02:00
parent fe91455908
commit c8a0397c26
Signed by: thegeneralist01
SSH key fingerprint: SHA256:pp9qddbCNmVNoSjevdvQvM5z0DHN7LTa8qBMbcMq/R4
5 changed files with 35 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

14
crates/archivr-server/static/assets/index-j2VTq1Xm.js → crates/archivr-server/static/assets/index-DASOWXxB.js
View file

File diff suppressed because one or more lines are too long

2
crates/archivr-server/static/assets/index-B0SNwnT5.css → crates/archivr-server/static/assets/index-Dd5Ih3Y1.css
View file

File diff suppressed because one or more lines are too long

4
crates/archivr-server/static/index.html
View file

@ -4,8 +4,8 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Archivr</title>
<script type="module" crossorigin src="/assets/index-j2VTq1Xm.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B0SNwnT5.css">
<script type="module" crossorigin src="/assets/index-DASOWXxB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dd5Ih3Y1.css">
</head>
<body>
<div id="root"></div>

24
frontend/src/components/CaptureDialog.jsx
View file

@ -730,15 +730,6 @@ function CaptureRow({ item, autoFocus, onLocatorChange, onQualityChange, onRemov
{conflictCount > 0 && (
<span className="capture-conflict-badge">{conflictCount} need selection</span>
)}
<button
type="button"
className="capture-playlist-toggle"
onClick={onPlaylistToggle}
aria-label={item.playlistExpanded ? 'Collapse video list' : 'Expand video list'}
aria-expanded={item.playlistExpanded}
>
{item.playlistExpanded ? '▲' : '▼'}
</button>
</>
)
}
@ -801,6 +792,21 @@ function CaptureRow({ item, autoFocus, onLocatorChange, onQualityChange, onRemov
return (
<div className="capture-row">
<div className="capture-row-main">
{isPlaylistSource(item.locator) ? (
item.playlistProbeState === 'done' ? (
<button
type="button"
className="capture-playlist-toggle capture-playlist-toggle--left"
onClick={onPlaylistToggle}
aria-label={item.playlistExpanded ? 'Collapse video list' : 'Expand video list'}
aria-expanded={item.playlistExpanded}
>
{item.playlistExpanded ? '▲' : '▼'}
</button>
) : (
<span className="capture-playlist-toggle-placeholder" aria-hidden="true" />
)
) : null}
<input
ref={inputRef}
className="capture-input"

10
frontend/src/styles.css
View file

@ -2881,6 +2881,16 @@ body.has-audio-bar { padding-bottom: 56px; }
padding: 2px 6px;
}
.capture-playlist-toggle:hover { color: var(--text); }
.capture-playlist-toggle--left {
flex-shrink: 0;
padding: 2px 4px;
font-size: 0.7rem;
}
.capture-playlist-toggle-placeholder {
display: inline-block;
width: 22px;
flex-shrink: 0;
}
.capture-conflict-badge {
font-size: 0.7rem;