feat(slint): jump-nav scroll-to-section + hide empty tabs + UX fixes

Brings the JUMP TO bar from a visual placeholder to a working nav,
plus two interaction fixes the user flagged on the previous build.

JUMP TO bar — functional scroll-to:
  - JumpNavTab gains an `anchor-y: length` field. JumpNavBar's
    tab-clicked callback now emits (id, anchor-y); the parent
    (ArtistPageView) scrolls page-flickable to land the section
    just below the sticky bar.
  - Tab list is built in Rust (`build_jump_tabs` in artist.rs)
    from the artist's actual data and pushed to a new
    `ArtistState.jump-tabs` model. Tabs are emitted only for
    sections that exist (top tracks present, "Discography" /
    "EPs & Singles" / "Live Albums" / "Compilations" / "Others"
    only when the corresponding release_sections entry is there);
    the Playlists tab — not implemented yet — never appears.
  - anchor-y estimates use layout-derived constants per section
    type (popular-tracks header + visible row count, release grid
    headers + ceil(album_count / 5) rows). Not pixel-perfect for
    long bios or grids that wrap differently, but lands the
    viewport inside the right section.
  - Removed the hardcoded ArtistPageView property — tabs and
    visibility are now data-driven.

Sticky positioning — dynamic:
  - jump-nav.natural-top now binds to
    `body-row.absolute-position.y - page-flickable.absolute-y -
    self.height`, so the bar always sits flush in the gap above
    the body row regardless of artist-header height (long-bio
    artists stop pushing the row out from under the bar).
  - Sidebar natural-top follows the same body-row anchor, so it
    too tracks where the body actually starts.

Search input UX:
  - The outer search-icon slot is now removed from layout (via
    `if !search-open`, not `visible:`) when the input opens, so
    the expanded input runs all the way to the bar's right
    padding — right under the user's cursor where the lupa just
    was, no leftover gap on the right.
  - `changed search-open` auto-focuses the inline TextInput, so
    typing starts immediately after clicking the lupa with no
    second click in the input.

cc
This commit is contained in:
vicrodh committed 2026-05-20 14:20:47 -06:00
1 parent 3429fe4ee2
commit 06a763443a
4 files changed
+146 -38

No files matched your search

@@ -21,6 +21,11 @@ import { QbzIcon } from "QbzIcon.slint";
export struct JumpNavTab {
id: string,
label: string,
// Page-local y the tab scrolls to when clicked. Measured from the
// top of the Flickable content (not the viewport), so the parent
// can set `viewport-y = -(anchor-y - sticky-bar-height)` to land
// the section just below the sticky bar.
anchor-y: length,
}
export component JumpNavBar inherits Rectangle {
@@ -28,7 +33,17 @@ export component JumpNavBar inherits Rectangle {
in property <string> active-tab-id;
in-out property <bool> search-open: false;
in-out property <string> search-text;
callback tab-clicked(string /* tab-id */);
// When the input opens, focus it so the caret lands inside the
// text field without an extra click. Without this the user has
// to move the cursor from the search button into the input
// before typing.
changed search-open => {
if (root.search-open) {
search-input.focus();
}
}
callback tab-clicked(string /* tab-id */, length /* anchor-y */);
callback search-clicked();
callback search-text-edited(string);
@@ -113,7 +128,7 @@ export component JumpNavBar inherits Rectangle {
mouse-cursor: pointer;
enabled: !root.search-open;
clicked => {
root.tab-clicked(tab.id);
root.tab-clicked(tab.id, tab.anchor-y);
}
}
}
@@ -223,14 +238,15 @@ export component JumpNavBar inherits Rectangle {
}
}
// Outer search toggle — only visible when the input is
// closed. Opening it expands the inline input above (which
// carries its own X close button), so the bar never shows
// two competing search affordances.
VerticalLayout {
// Outer search toggle — only present when the input is
// closed. `if` (not `visible:`) so the slot is reclaimed by
// the center region when the input opens, letting the
// expanded input run all the way to the bar's right padding
// (right where the user just clicked the lupa). The inline
// input carries its own X close button.
if !root.search-open: VerticalLayout {
alignment: center;
horizontal-stretch: 0;
visible: !root.search-open;
Rectangle {
width: 32px;
height: 32px;
@@ -250,7 +266,6 @@ export component JumpNavBar inherits Rectangle {
}
search-ta := TouchArea {
mouse-cursor: pointer;
enabled: !root.search-open;
clicked => {
root.search-clicked();
}