qbz/crates/qbz-slint/ui/settings/SettingsView.slint

// Settings page — a back/title header, a left sub-navigation column
// (Audio, Playback), and the active settings panel in a scroll area.
//
// Navigation between sub-sections is pure UI state (SettingsState.section);
// setting changes bubble up as settings-bool / settings-select callbacks
// to the Rust layer, which persists them and applies them to the player.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint";
import { NavState, ContentView, SettingsState } from "../state.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { NavButtons } from "../shell/NavButtons.slint";
import { AudioSettings } from "AudioSettings.slint";
import { PlaybackSettings } from "PlaybackSettings.slint";
import { AppearanceSettings } from "AppearanceSettings.slint";
import { OfflineSettings } from "OfflineSettings.slint";
import { LocalLibrarySettings } from "LocalLibrarySettings.slint";
import { ScrollView } from "std-widgets.slint";

component SubNavItem inherits Rectangle {
    in property <image> icon;
    in property <string> label;
    in property <bool> active: false;
    callback clicked();

    height: 38px;
    border-radius: Radius.sm;
    background: root.active ? Theme.surface-elevated
        : ta.has-hover ? Theme.surface-hover : transparent;

    HorizontalLayout {
        padding-left: 12px;
        padding-right: 12px;
        spacing: 10px;
        VerticalLayout {
            alignment: center;
            QbzIcon {
                source: root.icon;
                width: 16px;
                height: 16px;
                tint: root.active ? Theme.text-primary : Theme.text-secondary;
            }
        }
        Text {
            text: root.label;
            color: root.active ? Theme.text-primary : Theme.text-secondary;
            font-size: Typography.body;
            font-weight: root.active ? Typography.semibold : Typography.regular;
            vertical-alignment: center;
            horizontal-stretch: 1;
        }
    }

    ta := TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked();
        }
    }
}

export component SettingsView inherits Rectangle {
    callback settings-bool(string, bool);
    callback settings-select(string, int);
    callback settings-slider(string, int);
    callback settings-reset();

    background: Theme.surface-main;

    VerticalLayout {
        spacing: 0px;

        // --- Header: back button + title -----------------------------------
        Rectangle {
            height: 92px;
            VerticalLayout {
                padding-left: 32px;
                padding-right: 32px;
                padding-top: 11px;
                spacing: 12px;
                alignment: start;

                HorizontalLayout {
                    alignment: start;
                    NavButtons { }
                }

                Text {
                    text: @tr("Settings");
                    color: Theme.text-primary;
                    font-size: Typography.title;
                    font-weight: Typography.bold;
                }
            }
        }

        // --- Sub-nav + active panel ----------------------------------------
        HorizontalLayout {
            vertical-stretch: 1;

            // Left sub-navigation.
            Rectangle {
                width: 232px;
                VerticalLayout {
                    padding-left: 24px;
                    padding-right: 12px;
                    padding-top: 4px;
                    spacing: 4px;
                    alignment: start;
                    SubNavItem {
                        icon: @image-url("../assets/icons/volume-2.svg");
                        label: @tr("Audio");
                        active: SettingsState.section == 0;
                        clicked => {
                            SettingsState.section = 0;
                        }
                    }
                    SubNavItem {
                        icon: @image-url("../assets/icons/play.svg");
                        label: @tr("Playback");
                        active: SettingsState.section == 1;
                        clicked => {
                            SettingsState.section = 1;
                        }
                    }
                    SubNavItem {
                        icon: @image-url("../assets/icons/layers.svg");
                        label: @tr("Appearance");
                        active: SettingsState.section == 2;
                        clicked => {
                            SettingsState.section = 2;
                        }
                    }
                    SubNavItem {
                        icon: @image-url("../assets/icons/cloud-download.svg");
                        label: @tr("Offline");
                        active: SettingsState.section == 3;
                        clicked => {
                            SettingsState.section = 3;
                        }
                    }
                    SubNavItem {
                        icon: @image-url("../assets/icons/hard-drive.svg");
                        label: @tr("Local Library");
                        active: SettingsState.section == 4;
                        clicked => {
                            SettingsState.section = 4;
                        }
                    }
                }
            }

            // Active panel.
            ScrollView {
                horizontal-stretch: 1;
                horizontal-scrollbar-policy: ScrollBarPolicy.always-off;
                VerticalLayout {
                    padding-left: 20px;
                    padding-right: 40px;
                    padding-top: 4px;
                    padding-bottom: 60px;
                    alignment: start;

                    if SettingsState.loading: Text {
                        text: @tr("Loading settings...");
                        color: Theme.text-muted;
                        font-size: Typography.body;
                    }

                    if !SettingsState.loading && SettingsState.section == 0: AudioSettings {
                        settings-bool(k, v) => {
                            root.settings-bool(k, v);
                        }
                        settings-select(k, i) => {
                            root.settings-select(k, i);
                        }
                        settings-reset => {
                            root.settings-reset();
                        }
                    }
                    if !SettingsState.loading && SettingsState.section == 1: PlaybackSettings {
                        settings-bool(k, v) => {
                            root.settings-bool(k, v);
                        }
                        settings-select(k, i) => {
                            root.settings-select(k, i);
                        }
                        settings-slider(k, v) => {
                            root.settings-slider(k, v);
                        }
                    }
                    // Appearance — a structural replica; rows bind to
                    // AppearanceState and emit its own callbacks, so no
                    // SettingsView-level callback forwarding is needed here.
                    if !SettingsState.loading && SettingsState.section == 2: AppearanceSettings { }
                    if !SettingsState.loading && SettingsState.section == 3: OfflineSettings { }
                    if !SettingsState.loading && SettingsState.section == 4: LocalLibrarySettings { }
                }
            }
        }
    }
}