Data Types and Navigation

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

Relevant source files

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

• app/ui/TabSelectorView.slint
• app/ui/Types.slint

This page documents the foundational data structures and navigation components used in the Aurora player frontend. These definitions provide the bridge between the Rust backend's protocol types and the Slint UI's visual representation.

Data Structures (Types.slint)

The Types.slint file defines the core struct and enum types used throughout the UI to represent playback state, song metadata, and playlist information.

Song and Playback Types

Aurora distinguishes between a generic Song (used in lists and search results) and a CurrentSong (used for the active playback state).

• CurrentSong: Tracks the real-time state of the playing track, including an image type for album art and int values for duration and position tracking app/ui/Types.slint:1-9.
• Song: A metadata-heavy structure for library display. It includes UI-specific flags like selected for multi-selection logic and liked for heart-icon toggles app/ui/Types.slint:16-25.

Playlist Types

Playlists are handled via two structures to optimize memory and data transfer:

1. PlaylistMinimal: Used for the "All Playlists" view. It contains a list of album-arts (up to 4) to generate a grid-style cover preview app/ui/Types.slint:27-32.
2. Playlist: Used when a specific playlist is opened, containing the full array of Song objects app/ui/Types.slint:34-38.

Theming Singleton

The Theme global singleton serves as the central source of truth for all colors in the application. It is populated by the Rust backend via the interface.rs bridge when a theme update is received from the daemon app/ui/Types.slint:40-51.

Type Mapping: Protocol to UI

The following diagram illustrates how entities defined in Types.slint map to the logical concepts used across the system.

Entity Mapping: Natural Language to Code Space

graph TD
    subgraph "Natural Language Space"
        A["Active Track"]
        B["Library Entry"]
        C["Collection Preview"]
        D["Visual Palette"]
    end

    subgraph "Code Entity Space (Types.slint)"
        A --> CS["struct CurrentSong"]
        B --> S["struct Song"]
        C --> PM["struct PlaylistMinimal"]
        D --> T["global Theme"]
    end

    CS --- CS_Prop["title, artists, album_art, position"]
    S --- S_Prop["id, selected, liked, duration"]
    PM --- PM_Prop["title, length, album-arts"]
    T --- T_Prop["bgd0..bgd4, acct, txt1, txt2"]

Loading

Sources: app/ui/Types.slint:1-51

---

Navigation & Tab Selection

Navigation in Aurora is controlled by the Tabs enum and the TabSelectorView component. The system uses a state-driven approach where changing the active-view property triggers visibility changes in the MainView.

Tabs Enum

The Tabs enum defines the primary navigation targets within the application app/ui/Types.slint:11-14.

Variant	Target View
Search	Global search interface and results.
Library	Playlists, Liked songs, and Local library browsing.

TabSelectorView Component

The TabSelectorView is a horizontal navigation bar containing TabButton instances. It manages the active-view property through two-way binding (<=>) app/ui/TabSelectorView.slint:34-35.

• TabButton: A sub-component that handles hover/active visual states using the Theme singleton. It uses a TouchArea to detect clicks and update the active state app/ui/TabSelectorView.slint:2-32.
• Refresh Logic: When the "Library" tab is clicked, it triggers the refresh-library() callback app/ui/TabSelectorView.slint:56-59. This callback is typically linked to the Rust backend to fetch the latest playlist and song data from the daemon.

Navigation Data Flow

The diagram below shows how a user interaction in TabSelectorView.slint propagates through the system.

Data Flow: Navigation Interaction

graph LR
    subgraph "TabSelectorView.slint"
        TA["TouchArea (Library)"] --> BC["button-clicked()"]
        BC --> RL["callback refresh-library()"]
        TA --> AV["active-view = Tabs.Library"]
    end

    subgraph "Interface Bridge"
        RL --> RS["Rust: interface.rs"]
        RS --> DQ["Request::GetPlaylists"]
    end

    subgraph "UI Update"
        AV --> MV["MainView Visibility Logic"]
    end

Loading

Sources: app/ui/TabSelectorView.slint:23-30, app/ui/TabSelectorView.slint:52-59, app/ui/Types.slint:11-14

---

Technical Implementation Details

Theme Properties

The Theme singleton uses a naming convention for its properties to represent depth and hierarchy:

• bgd0 through bgd4: Background shades, where bgd0 is the darkest (typically the main window background) and bgd4 is the lightest (used for highlights or elevated surfaces) app/ui/Types.slint:41-45.
• acct: The accent color used for active tabs, sliders, and primary icons app/ui/Types.slint:48.
• txt1 and txt2: Primary and secondary text colors app/ui/Types.slint:46-47.

Component Styling

The TabButton implements smooth transitions for background and text colors using Slint's animate keyword, ensuring a fluid user experience when switching between views app/ui/TabSelectorView.slint:10-16. It also specifies the "JetBrainsMono NFP" font family to support the Nerd Font icons used in the labels (e.g., \u{f002} for the search magnifying glass) app/ui/TabSelectorView.slint:18,47,53.

Sources: app/ui/Types.slint:40-51, app/ui/TabSelectorView.slint:7-21