[feat](trx-frontend-http): overlay bookmarks on spectrum; enforce one per freq

Draw bookmark frequency markers on the spectrum canvas: amber vertical
line + ribbon shape (rectangle with V-notch) at each bookmark in view.
Below the freq axis, show a #spectrum-bookmark-axis row of clickable
amber ribbon labels (clip-path bookmark shape); clicking tunes the rig.
Labels auto-appear / collapse as bookmarks scroll in and out of view.

Server: reject POST/PUT with 409 Conflict when another bookmark already
exists at the requested freq_hz (BookmarkStore::freq_taken helper).

Client: bmFetch() triggers a spectrum redraw so markers appear
immediately on load without requiring a tab visit first.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-01 19:39:09 +01:00
parent e80f71ced6
commit 587b06c6d8
6 changed files with 152 additions and 0 deletions
@@ -1516,6 +1516,50 @@ button:focus-visible, input:focus-visible, select:focus-visible {
top: 2px;
font-weight: 700;
}
#spectrum-freq-axis.bm-axis-open {
border-radius: 0;
border-bottom-color: transparent;
}
#spectrum-bookmark-axis {
position: relative;
height: 0;
overflow: hidden;
width: 100%;
font-size: 0.68rem;
background: var(--bg-secondary);
border-radius: 0 0 6px 6px;
border: 1px solid var(--border);
border-top: none;
transition: height 80ms ease;
}
#spectrum-bookmark-axis.bm-axis-visible {
height: 22px;
}
#spectrum-bookmark-axis span {
position: absolute;
transform: translateX(-50%);
white-space: nowrap;
top: 3px;
cursor: pointer;
font-weight: 600;
font-size: 0.66rem;
/* amber bookmark-ribbon appearance */
background: rgba(246,173,85,0.18);
color: #c07320;
border: 1px solid rgba(246,173,85,0.55);
border-radius: 3px 3px 0 0;
padding: 1px 5px 0;
/* clip the bottom into a V-notch bookmark shape */
clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
#spectrum-bookmark-axis span:hover {
background: rgba(246,173,85,0.38);
color: #7a4a00;
}
#spectrum-tooltip {
display: none;
position: absolute;