Set up a reflowing layout for the cards

gm-control-panel/Cargo.toml

@@ -6,14 +6,14 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-adw                 = { version = "0.4", package = "libadwaita", features = [ "v1_2" ] }
+adw                 = { version = "0.4", package = "libadwaita", features = [ "v1_2", "gtk_v4_6" ] }
 config              = { path = "../config" }
 config-derive       = { path = "../config-derive" }
 futures             = { version = "0.3" }
 gio                 = { version = "0.17" }
 glib                = { version = "0.17" }
 gdk                 = { version = "0.6", package = "gdk4" }
-gtk                 = { version = "0.6", package = "gtk4" }
+gtk                 = { version = "0.6", package = "gtk4", features = [ "v4_6" ] }
 serde               = { version = "1" }
 serde_json          = { version = "*" }
 tokio               = { version = "1", features = ["full"] }

gm-control-panel/build.rs

@@ -2,6 +2,6 @@ fn main() {
     glib_build_tools::compile_resources(
         "resources",
         "resources/gresources.xml",
-        "com.luminescent-dreams.dashboard.gresource",
+        "com.luminescent-dreams.gm-control-panel.gresource",
     );
 }

gm-control-panel/resources/gresources.xml

@@ -1,3 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
+    <gresource prefix="/com/luminescent-dreams/gm-control-panel/">
+        <file>style.css</file>
+    </gresource>
 </gresources>

gm-control-panel/resources/style.css

@@ -0,0 +1,6 @@
+.playlist-card {
+    margin: 8px;
+    padding: 8px;
+    min-width: 100px;
+    min-height: 100px;
+}

gm-control-panel/src/app_window.rs

@@ -1,12 +1,64 @@
+use crate::PlaylistCard;
+use adw::prelude::AdwApplicationWindowExt;
+use gio::resources_lookup_data;
+use gtk::{prelude::*, STYLE_PROVIDER_PRIORITY_USER};
+use std::iter::Iterator;
+
 #[derive(Clone)]
 pub struct ApplicationWindow {
     pub window: adw::ApplicationWindow,
+    pub layout: gtk::FlowBox,
+    pub playlists: Vec<PlaylistCard>,
 }
 
 impl ApplicationWindow {
     pub fn new(app: &adw::Application) -> Self {
-        let window = adw::ApplicationWindow::new(app);
+        let window = adw::ApplicationWindow::builder()
+            .application(app)
+            .title("GM-control-panel")
+            .width_request(500)
+            .build();
 
-        Self { window }
+        let stylesheet = String::from_utf8(
+            resources_lookup_data(
+                "/com/luminescent-dreams/gm-control-panel/style.css",
+                gio::ResourceLookupFlags::NONE,
+            )
+            .expect("stylesheet should just be available")
+            .to_vec(),
+        )
+        .expect("to parse stylesheet");
+
+        let provider = gtk::CssProvider::new();
+        provider.load_from_data(&stylesheet);
+        let context = window.style_context();
+        context.add_provider(&provider, STYLE_PROVIDER_PRIORITY_USER);
+
+        let layout = gtk::FlowBox::new();
+
+        let playlists: Vec<PlaylistCard> = vec![
+            "Creepy Cathedral",
+            "Joyful Tavern",
+            "Exploring",
+            "Out on the streets",
+            "The North Abbey",
+        ]
+        .into_iter()
+        .map(|name| {
+            let playlist = PlaylistCard::new();
+            playlist.set_name(name);
+            playlist
+        })
+        .collect();
+
+        playlists.iter().for_each(|card| layout.append(card));
+
+        window.set_content(Some(&layout));
+
+        Self {
+            window,
+            layout,
+            playlists,
+        }
     }
 }

gm-control-panel/src/main.rs

@@ -10,6 +10,12 @@ use app_window::ApplicationWindow;
 
 mod config;
 
+mod playlist_card;
+use playlist_card::PlaylistCard;
+
+mod types;
+use types::PlaybackState;
+
 #[derive(Clone, Debug)]
 pub enum Message {}
 
@@ -19,6 +25,9 @@ pub struct Core {
 }
 
 pub fn main() {
+    gio::resources_register_include!("com.luminescent-dreams.gm-control-panel.gresource")
+        .expect("Failed to register resource");
+
     let app = adw::Application::builder()
         .application_id("com.luminescent-dreams.gm-control-panel")
         .build();

gm-control-panel/src/playlist_card.rs

@@ -0,0 +1,54 @@
+use crate::PlaybackState;
+use glib::Object;
+use gtk::{prelude::*, subclass::prelude::*};
+
+pub struct PlaylistCardPrivate {
+    name: gtk::Label,
+    playing: gtk::Label,
+}
+
+impl Default for PlaylistCardPrivate {
+    fn default() -> Self {
+        Self {
+            name: gtk::Label::new(None),
+            playing: gtk::Label::new(Some("Stopped")),
+        }
+    }
+}
+
+#[glib::object_subclass]
+impl ObjectSubclass for PlaylistCardPrivate {
+    const NAME: &'static str = "PlaylistCard";
+    type Type = PlaylistCard;
+    type ParentType = gtk::Box;
+}
+
+impl ObjectImpl for PlaylistCardPrivate {}
+impl WidgetImpl for PlaylistCardPrivate {}
+impl BoxImpl for PlaylistCardPrivate {}
+
+glib::wrapper! {
+    pub struct PlaylistCard(ObjectSubclass<PlaylistCardPrivate>) @extends gtk::Box, gtk::Widget, @implements gtk::Orientable;
+}
+
+impl PlaylistCard {
+    pub fn new() -> Self {
+        let s: Self = Object::builder().build();
+        s.set_orientation(gtk::Orientation::Vertical);
+        s.add_css_class("playlist-card");
+        s.add_css_class("card");
+
+        s.append(&s.imp().name);
+        s.append(&s.imp().playing);
+
+        s
+    }
+
+    pub fn set_name(&self, s: &str) {
+        self.imp().name.set_text(s);
+    }
+
+    pub fn set_playback(&self, s: PlaybackState) {
+        self.imp().playing.set_text(&format!("{}", s))
+    }
+}

gm-control-panel/src/types.rs

@@ -0,0 +1,16 @@
+use std::fmt;
+
+#[derive(Clone, Debug)]
+pub enum PlaybackState {
+    Stopped,
+    Playing,
+}
+
+impl fmt::Display for PlaybackState {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match self {
+            Self::Stopped => write!(f, "Stopped"),
+            Self::Playing => write!(f, "Playing"),
+        }
+    }
+}