audrey/resources/window.blp

using Gtk 4.0;
using Adw 1;

template $UiWindow: Adw.ApplicationWindow {
  title: _("audrey");
  default-width: 800;
  default-height: 600;

  Adw.ToolbarView {
    top-bar-style: raised;
    bottom-bar-style: raised;

    [top]
    Adw.HeaderBar {
      [start]
      Button {
        icon-name: "media-playlist-shuffle";
        sensitive: bind template.can_click_shuffle_all;
        clicked => $shuffle_all ();
      }

      title-widget: Adw.ViewSwitcher {
        stack: stack;
        policy: wide;
      };

      [end]
      Button {
        icon-name: "applications-system";
        clicked => $show_setup_dialog ();
      }
    }

    content: Adw.ViewStack stack {
      vexpand: true;
      Adw.ViewStackPage {
        icon-name: "media-optical-cd";
        title: _("Albums");

        child: Adw.NavigationView {
          Adw.NavigationPage {
            title: _("Albums");
            vexpand: true;

            child: Adw.ToolbarView {
              [top]
              CenterBox {
                styles [ "toolbar" ]

                [start]
                DropDown {
                  selected: 0;
                  model: StringList {
                    strings [
                      _("Random"),
                      _("Recently added"),
                      _("Most played"),
                      _("Recently played"),
                      _("Starred"),
                      _("Name"),
                      _("Artist"),
                    ]
                  };
                }

                [center]
                SearchEntry {
                  placeholder-text: _("Search...");
                }

                [end]
                Box {
                  Button {
                    icon-name: "view-refresh";
                  }
                }
              }

              ScrolledWindow {
                vexpand: true;
                GridView {}
              }
            };
          }
        };
      }

      Adw.ViewStackPage {
        icon-name: "media-playback-start";
        title: _("Play queue");
        name: "play-queue";

        child: Box {
          name: "play-queue-page";
          homogeneous: true;

          Adw.Clamp {
            halign: center;
            margin-top: 24;
            margin-bottom: 24;
            margin-start: 24;
            margin-end: 24;

            Picture {
              valign: center;
              styles [ "frame" ]
              halign: center;
              paintable: bind template.playing_cover_art;
            }
          }

          $UiPlayQueue play_queue {
            hexpand: true;
            halign: fill;

            margin-top: 48;
            margin-bottom: 48;
            margin-start: 24;
            margin-end: 24;

            styles [ "frame" ]
            playbin: bind template.playbin;
          }
        };
      }
    };

    [bottom]
    $UiPlaybar playbar {
      song: bind template.song;
      playbin: bind template.playbin;
      playing_cover_art: bind template.playing_cover_art;
      show_cover_art: bind $show_playbar_cover_art (stack.visible-child-name) as <bool>;
    }
  }
}