// Collapsed-sidebar hover tooltip. When the sidebar is in the mini (icon-only)
// state, hovering a folder or top-level playlist row surfaces its name in a
// small bubble to the right (folders append their playlist count). Mirrors the
// native `title` Tauri puts on the collapsed buttons. Rendered at the AppShell
// level because the sidebar clips its own overflow. Visual only (no TouchArea),
// so it never blocks the pointer.

import { Theme } from "../foundation/semantic-colors.slint";
import { Radius } from "../foundation/radius.slint";
import { SidebarTooltipState, ShellState } from "../state.slint";

export component SidebarTooltip inherits Rectangle {
    // Auto-hides if the sidebar leaves the mini state while a tooltip lingers.
    visible: SidebarTooltipState.open && ShellState.sidebar-mini;

    if SidebarTooltipState.open && ShellState.sidebar-mini: bubble := Rectangle {
        x: SidebarTooltipState.anchor-x;
        // Center the bubble against the 32px row.
        y: SidebarTooltipState.anchor-y + (32px - self.height) / 2;
        width: row.preferred-width;
        height: row.preferred-height;
        background: Theme.surface-elevated;
        border-radius: Radius.sm;
        border-width: 1px;
        border-color: Theme.border-muted;
        drop-shadow-blur: 16px;
        drop-shadow-color: Theme.card-shadow;
        drop-shadow-offset-y: 4px;

        row := HorizontalLayout {
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            Text {
                text: SidebarTooltipState.text;
                color: Theme.text-primary;
                font-size: 12px;
                font-weight: 500;
                vertical-alignment: center;
            }
        }
    }
}