Slint UI Components

Slint UI Components

Relevant source files

The following files were used as context for generating this wiki page:

• app/ui/AuroraPlayer.slint
• app/ui/CustomComp.slint
• app/ui/LibraryView.slint
• app/ui/MainView.slint
• app/ui/NowPlayingView.slint
• app/ui/PlayerView.slint
• app/ui/QueueView.slint
• app/ui/TabSelectorView.slint
• app/ui/Types.slint

The Aurora user interface is built using the Slint declarative UI framework. The UI is composed of a root layout (AuroraPlayer.slint) that manages global state and coordinates between several specialized views and a library of custom reusable widgets.

Component Hierarchy & View Management

The UI employs a state-based visibility pattern for switching between major views like the Library and Search. This is primarily managed via the active-view property of type Tabs app/ui/Types.slint:11-14.

Root Layout: AuroraPlayer

AuroraPlayer is the top-level Window component app/ui/AuroraPlayer.slint:20. it acts as the central hub for:

• Callback Delegation: It defines dozens of callbacks (e.g., seek, play-next, create-playlist) that are linked to Rust logic in interface.rs app/ui/AuroraPlayer.slint:21-52.
• Global State: Holds properties for the current song Title, Artists, AlbumArt, and the playback position app/ui/AuroraPlayer.slint:54-59.
• Context Menus: Hosts the ContextMenu, PlContextMenu, and QueueContextMenu as overlays app/ui/AuroraPlayer.slint:112-153.

Main Navigation & Views

The layout is divided into a sidebar-style queue and a main content area:

Component	File	Responsibility
QueueView	QueueView.slint	Displays the upcoming tracklist with drag-and-drop reordering app/ui/QueueView.slint:5-155.
MainView	MainView.slint	Container for SearchView and LibraryView, handling the opacity-based transition between them app/ui/MainView.slint:121-211.
PlayerView	PlayerView.slint	Transport controls (Play/Pause, Prev/Next, Shuffle/Repeat) and the seek bar app/ui/PlayerView.slint:15-174.
NowPlayingView	NowPlayingView.slint	Displays metadata and album art for the currently active track with marquee scrolling for long text app/ui/NowPlayingView.slint:2-121.
TabSelectorView	TabSelectorView.slint	The top navigation bar for switching between Search and Library app/ui/TabSelectorView.slint:34-62.

UI Structure Overview

The following diagram illustrates the relationship between the root component and its primary children.

Title: Aurora UI Component Hierarchy

graph TD
    subgraph "Root Layer"
        AP["AuroraPlayer (Window)"]
    end

    subgraph "Navigation"
        TSV["TabSelectorView"]
    end

    subgraph "Content Area"
        MV["MainView"]
        SV["SearchView"]
        LV["LibraryView"]
    end

    subgraph "Playback & Queue"
        QV["QueueView"]
        PV["PlayerView"]
        NPV["NowPlayingView"]
    end

    AP --> TSV
    AP --> MV
    AP --> QV
    AP --> PV
    MV --> SV
    MV --> LV
    PV --> NPV
    QV --> NPV

Loading

Sources: app/ui/AuroraPlayer.slint:164-211, app/ui/MainView.slint:143-211

View Switching Pattern

Aurora uses a "State/Opacity" pattern to switch views within MainView.slint. Rather than destroying components, it toggles their visible property and animates opacity based on the active-view enum app/ui/MainView.slint:144-159.

• SearchView: Provides a TextInput for queries and a ComboBox to filter by "By Artist" or "By Title" app/ui/MainView.slint:6-70.
• LibraryView: Manages the display of "Recently Played" songs and the "Playlists" grid app/ui/LibraryView.slint:53-154. It also contains the logic for the expandable "Create Playlist" input pill app/ui/LibraryView.slint:157-173.

Event Delegation Chain

Events (like clicking a song) follow a strict delegation chain from low-level widgets up to the AuroraPlayer root, where they are eventually handled by Rust code.

Title: Event Delegation Flow (e.g., Adding a Song)

sequenceDiagram
    participant W as SongList / SongCard
    participant V as LibraryView / SearchView
    participant M as MainView
    participant R as AuroraPlayer (Root)
    participant B as Rust Backend (interface.rs)

    W->>V: item-clicked(song_id)
    V->>M: item-clicked(song_id)
    M->>R: add(song_id)
    R->>B: invoke add(song_id) callback

Loading

Sources: app/ui/MainView.slint:202-204, app/ui/LibraryView.slint:92-94, app/ui/AuroraPlayer.slint:30

Sub-Modules

Detailed documentation for data structures and the reusable widget library can be found in the child pages:

Data Types & Navigation (Types.slint, TabSelectorView.slint)

Covers the Song, Playlist, and Theme struct definitions, the Tabs enum, and the TabSelectorView component logic. For details, see Data Types & Navigation (Types.slint, TabSelectorView.slint).

Reusable Widget Library (CustomComp.slint)

Documents the CustomComp.slint library, including the CustomSlider (used for seek/volume), SongList, PlList (playlist grid), and the various ContextMenu implementations. For details, see Reusable Widget Library (CustomComp.slint).

Sources: app/ui/Types.slint:1-51, app/ui/CustomComp.slint:1-228, app/ui/TabSelectorView.slint:1-62