using Gtk 4.0; using Adw 1; template $WaveletWindow: Adw.ApplicationWindow { title: _("Wavelet"); default-width: 800; default-height: 600; content: Box { orientation: vertical; Adw.OverlaySplitView { vexpand: true; [sidebar] Adw.NavigationPage { width-request: 100; title: _("Wavelet"); Adw.ToolbarView { [top] Adw.HeaderBar {} content: Box { orientation: vertical; ListBox sidebar { styles [ "navigation-sidebar", ] ListBoxRow sidebar_setup { Label { xalign: 0; label: _("Setup"); } } ListBoxRow sidebar_play_queue { Label { xalign: 0; label: _("Play queue"); } } } Separator {} ListBox { selection-mode: none; styles [ "navigation-sidebar", ] Adw.ButtonRow { title: _("Shuffle all tracks"); start-icon-name: "media-playlist-shuffle"; } } }; } } [content] Stack stack { StackPage { name: "setup"; title: _("Setup"); child: $WaveletSetup setup {}; } StackPage { name: "artist_list"; title: _("Artists"); child: $WaveletArtistList artist_list {}; } StackPage { name: "song_list"; title: _("Songs"); child: $WaveletSongList song_list {}; } StackPage { name: "play_queue"; title: _("Play queue"); child: $WaveletPlayQueue play_queue {}; } } } [bottom] Box { orientation: horizontal; styles [ "toolbar", ] Image { height-request: 100; width-request: 100; } Box { orientation: vertical; valign: center; Label { halign: start; label: "Title"; } Label { halign: start; label: "Artist - Album - Year"; } Box { halign: start; orientation: horizontal; Label { label: "00:00"; } Scale { orientation: horizontal; width-request: 200; adjustment: Adjustment { lower: 0; upper: 100; value: 0; }; } Label { label: "99:99"; } } } Separator { styles [ "spacer", ] hexpand: true; } Button { icon-name: "media-skip-backward"; valign: center; } Button { icon-name: "media-playback-start"; valign: center; } Button { icon-name: "media-skip-forward"; valign: center; } Button { icon-name: "non-starred"; valign: center; } Button { icon-name: "audio-volume-high"; valign: center; } Scale { orientation: horizontal; width-request: 130; adjustment: Adjustment { lower: 0; upper: 100; value: 100; }; } Button { icon-name: "media-playlist-consecutive"; valign: center; } } }; }