From 877a6c442551501a529badde4d1462003ff0fc36 Mon Sep 17 00:00:00 2001
From: Marcus Behrendt <marcus.behrendt.86@gmail.com>
Date: Fri, 11 Oct 2024 17:41:42 +0200
Subject: [PATCH 1/6] revert(container-row): Inherit from `AdwActionRow`

This reverts commit 3dc7b2102651f62b5b36e6100ef431b9d7b41fdf. The reason
is that we need to make the container rows selectable again, as we offer
the option of switching between grid and list mode.
---
 src/view/container_row.rs | 164 ++++++++++++++++++++++++++++++++------
 src/view/container_row.ui | 152 ++++++++++++++++++++++++++++-------
 2 files changed, 265 insertions(+), 51 deletions(-)

diff --git a/src/view/container_row.rs b/src/view/container_row.rs
index 36d65c8a..15901e86 100644
--- a/src/view/container_row.rs
+++ b/src/view/container_row.rs
@@ -1,3 +1,5 @@
+use std::cell::RefCell;
+
 use adw::prelude::*;
 use adw::subclass::prelude::*;
 use gettextrs::gettext;
@@ -8,6 +10,7 @@ use gtk::glib;
 use gtk::CompositeTemplate;
 
 use crate::model;
+use crate::model::prelude::*;
 use crate::utils;
 use crate::view;
 use crate::widget;
@@ -19,30 +22,42 @@ mod imp {
     #[properties(wrapper_type = super::ContainerRow)]
     #[template(resource = "/com/github/marhkb/Pods/ui/view/container_row.ui")]
     pub(crate) struct ContainerRow {
+        pub(super) bindings: RefCell<Vec<glib::Binding>>,
         #[property(get, set, construct, nullable)]
         pub(super) container: glib::WeakRef<model::Container>,
         #[template_child]
         pub(super) spinner: TemplateChild<widget::Spinner>,
-        // #[template_child]
-        // pub(super) name_label: TemplateChild<gtk::Label>,
-        // #[template_child]
-        // pub(super) repo_label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) check_button_revealer: TemplateChild<gtk::Revealer>,
+        #[template_child]
+        pub(super) check_button: TemplateChild<gtk::CheckButton>,
+        #[template_child]
+        pub(super) name_label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) pod_image: TemplateChild<gtk::Image>,
+        #[template_child]
+        pub(super) repo_label: TemplateChild<gtk::Label>,
+        #[template_child]
+        pub(super) ports_flow_box: TemplateChild<gtk::FlowBox>,
         #[template_child]
         pub(super) stats_box: TemplateChild<gtk::Box>,
         #[template_child]
         pub(super) cpu_bar: TemplateChild<widget::CircularProgressBar>,
         #[template_child]
         pub(super) mem_bar: TemplateChild<widget::CircularProgressBar>,
+        #[template_child]
+        pub(super) end_box_revealer: TemplateChild<gtk::Revealer>,
     }
 
     #[glib::object_subclass]
     impl ObjectSubclass for ContainerRow {
         const NAME: &'static str = "PdsContainerRow";
         type Type = super::ContainerRow;
-        type ParentType = adw::ActionRow;
+        type ParentType = gtk::ListBoxRow;
 
         fn class_init(klass: &mut Self::Class) {
             klass.bind_template();
+            klass.bind_template_callbacks();
 
             klass.install_action("container-row.activate", None, |widget, _, _| {
                 widget.activate();
@@ -76,9 +91,20 @@ mod imp {
             let container_list_expr =
                 container_expr.chain_property::<model::Container>("container-list");
 
+            let selection_mode_expr =
+                container_list_expr.chain_property::<model::ContainerList>("selection-mode");
+
+            selection_mode_expr.bind(&*self.check_button_revealer, "reveal-child", Some(obj));
+            selection_mode_expr
+                .chain_closure::<bool>(closure!(|_: Self::Type, is_selection_mode: bool| {
+                    !is_selection_mode
+                }))
+                .bind(&*self.end_box_revealer, "reveal-child", Some(obj));
+
             let status_expr = container_expr.chain_property::<model::Container>("status");
             let health_status_expr =
                 container_expr.chain_property::<model::Container>("health-status");
+            let pod_expr = container_expr.chain_property::<model::Container>("pod");
             let stats_expr = container_expr.chain_property::<model::Container>("stats");
 
             container_expr
@@ -137,14 +163,33 @@ mod imp {
                     }
                 }),
             )
-            .bind(obj, "title", Some(obj));
+            .bind(&*self.name_label, "label", Some(obj));
+
+            pod_expr
+                .chain_closure::<bool>(closure!(
+                    |_: Self::Type, pod: Option<model::Pod>| pod.is_some()
+                ))
+                .bind(&*self.pod_image, "visible", Some(obj));
+
+            gtk::ClosureExpression::new::<bool>(
+                [
+                    &pod_expr,
+                    &container_expr
+                        .chain_property::<model::Container>("ports")
+                        .chain_property::<model::PortMappingList>("len"),
+                ],
+                closure!(|_: Self::Type, pod: Option<&model::Pod>, len: u32| {
+                    pod.is_none() && len > 0
+                }),
+            )
+            .bind(&*self.ports_flow_box, "visible", Some(obj));
 
             container_expr
                 .chain_property::<model::Container>("image-name")
                 .chain_closure::<String>(closure!(|_: Self::Type, name: Option<String>| {
                     utils::escape(&utils::format_option(name))
                 }))
-                .bind(obj, "subtitle", Some(obj));
+                .bind(&*self.repo_label, "label", Some(obj));
 
             status_expr
                 .chain_closure::<bool>(closure!(
@@ -194,13 +239,78 @@ mod imp {
 
     impl WidgetImpl for ContainerRow {}
     impl ListBoxRowImpl for ContainerRow {}
-    impl PreferencesRowImpl for ContainerRow {}
-    impl ActionRowImpl for ContainerRow {}
+
+    #[gtk::template_callbacks]
+    impl ContainerRow {
+        #[template_callback]
+        fn on_notify_container(&self) {
+            let mut bindings = self.bindings.borrow_mut();
+            while let Some(binding) = bindings.pop() {
+                binding.unbind();
+            }
+
+            let obj = &*self.obj();
+
+            if let Some(container) = obj.container() {
+                let binding = container
+                    .bind_property("selected", &*self.check_button, "active")
+                    .flags(glib::BindingFlags::SYNC_CREATE | glib::BindingFlags::BIDIRECTIONAL)
+                    .build();
+
+                bindings.push(binding);
+
+                if !container.has_pod() {
+                    self.ports_flow_box.bind_model(
+                        Some(&container.ports()),
+                        clone!(@weak obj => @default-panic, move |item| {
+                            let port_mapping =
+                                item.downcast_ref::<model::PortMapping>().unwrap();
+
+                            let label = gtk::Label::builder()
+                                .css_classes([
+                                    "status-badge-small",
+                                    "numeric",
+                                ])
+                                .halign(gtk::Align::Center)
+                                .label(format!(
+                                    "{}/{}",
+                                    port_mapping.host_port(),
+                                    port_mapping.protocol()
+                                ))
+                                .build();
+
+                            let css_classes = utils::css_classes(&label);
+                            super::ContainerRow::this_expression("container")
+                                .chain_property::<model::Container>("status")
+                                .chain_closure::<Vec<String>>(closure!(
+                                    |_: super::ContainerRow, status: model::ContainerStatus| {
+                                        css_classes
+                                            .iter()
+                                            .cloned()
+                                            .chain(Some(String::from(
+                                                super::super::container_status_css_class(status)
+                                            )))
+                                            .collect::<Vec<_>>()
+                                    }
+                                ))
+                                .bind(&label, "css-classes", Some(&obj));
+
+                            gtk::FlowBoxChild::builder()
+                                .halign(gtk::Align::Start)
+                                .child(&label)
+                                .build()
+                                .upcast()
+                        }),
+                    );
+                }
+            }
+        }
+    }
 }
 
 glib::wrapper! {
     pub(crate) struct ContainerRow(ObjectSubclass<imp::ContainerRow>)
-        @extends gtk::Widget, gtk::ListBoxRow, adw::PreferencesRow, adw::ActionRow,
+        @extends gtk::Widget, gtk::ListBoxRow,
         @implements gtk::Accessible, gtk::Actionable, gtk::Buildable, gtk::ConstraintTarget;
 }
 
@@ -248,19 +358,27 @@ impl ContainerRow {
 
     fn activate(&self) {
         if let Some(container) = self.container().as_ref() {
-            let nav_page = adw::NavigationPage::builder()
-                .child(&view::ContainerDetailsPage::from(container))
-                .build();
-
-            Self::this_expression("container")
-                .chain_property::<model::Container>("name")
-                .chain_closure::<String>(closure!(|_: Self, name: &str| gettext!(
-                    "Container {}",
-                    name
-                )))
-                .bind(&nav_page, "title", Some(self));
-
-            utils::navigation_view(self).push(&nav_page);
+            if container
+                .container_list()
+                .map(|list| list.is_selection_mode())
+                .unwrap_or(false)
+            {
+                container.select();
+            } else {
+                let nav_page = adw::NavigationPage::builder()
+                    .child(&view::ContainerDetailsPage::from(container))
+                    .build();
+
+                Self::this_expression("container")
+                    .chain_property::<model::Container>("name")
+                    .chain_closure::<String>(closure!(|_: Self, name: &str| gettext!(
+                        "Container {}",
+                        name
+                    )))
+                    .bind(&nav_page, "title", Some(self));
+
+                utils::navigation_view(self).push(&nav_page);
+            }
         }
     }
 }
diff --git a/src/view/container_row.ui b/src/view/container_row.ui
index 15fe8715..5045e163 100644
--- a/src/view/container_row.ui
+++ b/src/view/container_row.ui
@@ -1,30 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="PdsContainerRow" parent="AdwActionRow">
+  <template class="PdsContainerRow" parent="GtkListBoxRow">
+    <signal name="notify::container" handler="on_notify_container"/>
     <property name="action-name">container-row.activate</property>
-    <property name="activatable">True</property>
 
-    <child type="prefix">
-      <object class="PdsSpinner" id="spinner"/>
-    </child>
-
-    <child type="suffix">
+    <child>
       <object class="GtkBox">
-        <property name="spacing">6</property>
+        <property name="margin-top">7</property>
+        <property name="margin-end">12</property>
+        <property name="margin-bottom">7</property>
+        <property name="margin-start">10</property>
 
         <child>
-          <object class="GtkBox" id="stats_box">
-            <property name="spacing">6</property>
-
-            <child>
-              <object class="PdsCircularProgressBar" id="cpu_bar">
-                <property name="icon-name">processor-symbolic</property>
-              </object>
-            </child>
+          <object class="GtkRevealer" id="check_button_revealer">
+            <property name="transition-type">slide-right</property>
 
             <child>
-              <object class="PdsCircularProgressBar" id="mem_bar">
-                <property name="icon-name">memory-symbolic</property>
+              <object class="GtkCheckButton" id="check_button">
+                <style>
+                  <class name="selection-mode"/>
+                </style>
+                <property name="margin-start">2</property>
+                <property name="margin-end">10</property>
+                <property name="valign">center</property>
               </object>
             </child>
 
@@ -33,23 +31,121 @@
 
         <child>
           <object class="GtkBox">
-            <property name="spacing">3</property>
+            <property name="spacing">6</property>
 
             <child>
-              <object class="PdsContainerMenuButton" id="menu_button">
-                <style>
-                  <class name="flat"/>
-                </style>
-                <binding name="container">
-                  <lookup name="container">PdsContainerRow</lookup>
-                </binding>
+              <object class="PdsSpinner" id="spinner">
+                <property name="margin-end">4</property>
+              </object>
+            </child>
+
+            <child>
+              <object class="GtkBox">
+                <property name="hexpand">True</property>
                 <property name="valign">center</property>
+                <property name="orientation">vertical</property>
+                <property name="spacing">3</property>
+
+                <child>
+                  <object class="GtkBox">
+                    <property name="spacing">6</property>
+
+                    <child>
+                      <object class="GtkLabel" id="name_label">
+                        <property name="use-markup">True</property>
+                        <property name="wrap">True</property>
+                        <property name="wrap-mode">word-char</property>
+                        <property name="xalign">0</property>
+                      </object>
+                    </child>
+
+                    <child>
+                      <object class="GtkImage" id="pod_image">
+                        <style>
+                          <class name="dim-icon"/>
+                        </style>
+                        <property name="icon-name">pod-circle-symbolic</property>
+                      </object>
+                    </child>
+
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkLabel" id="repo_label">
+                    <style>
+                      <class name="subtitle"/>
+                    </style>
+                    <property name="use-markup">True</property>
+                    <property name="wrap">True</property>
+                    <property name="wrap-mode">word-char</property>
+                    <property name="xalign">0</property>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkFlowBox" id="ports_flow_box">
+                    <property name="can-target">False</property>
+                    <property name="column-spacing">3</property>
+                    <property name="row-spacing">3</property>
+                    <property name="margin-top">6</property>
+                    <property name="max-children-per-line">96</property>
+                    <property name="selection-mode">none</property>
+                  </object>
+                </child>
+
               </object>
             </child>
 
             <child>
-              <object class="GtkImage">
-                <property name="icon_name">go-next-symbolic</property>
+              <object class="GtkBox" id="stats_box">
+                <property name="spacing">6</property>
+
+                <child>
+                  <object class="PdsCircularProgressBar" id="cpu_bar">
+                    <property name="icon-name">processor-symbolic</property>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="PdsCircularProgressBar" id="mem_bar">
+                    <property name="icon-name">memory-symbolic</property>
+                  </object>
+                </child>
+
+              </object>
+            </child>
+
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkRevealer" id="end_box_revealer">
+            <property name="transition-type">slide-left</property>
+
+            <child>
+              <object class="GtkBox" id="end_box">
+                <property name="margin-start">6</property>
+                <property name="spacing">3</property>
+
+                <child>
+                  <object class="PdsContainerMenuButton" id="menu_button">
+                    <style>
+                      <class name="flat"/>
+                    </style>
+                    <binding name="container">
+                      <lookup name="container">PdsContainerRow</lookup>
+                    </binding>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkImage">
+                    <property name="icon_name">go-next-symbolic</property>
+                  </object>
+                </child>
+
               </object>
             </child>
 

From 7de67273d1c672031fa3c5bddbbe276c4f318781 Mon Sep 17 00:00:00 2001
From: Marcus Behrendt <marcus.behrendt.86@gmail.com>
Date: Fri, 11 Oct 2024 17:48:45 +0200
Subject: [PATCH 2/6] feat(gschema): Add key `containers-view`

This key will soon enable switching between grid and list view in the
containers panel.
---
 data/com.github.marhkb.Pods.gschema.xml.in | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/data/com.github.marhkb.Pods.gschema.xml.in b/data/com.github.marhkb.Pods.gschema.xml.in
index 68aa6705..69453405 100644
--- a/data/com.github.marhkb.Pods.gschema.xml.in
+++ b/data/com.github.marhkb.Pods.gschema.xml.in
@@ -26,6 +26,15 @@
       <summary>The last used view</summary>
       <description></description>
     </key>
+    <key name="containers-view" type="s">
+      <choices>
+        <choice value='grid'/>
+        <choice value='list'/>
+      </choices>
+      <default>'grid'</default>
+      <summary>Containers representation</summary>
+      <description></description>
+    </key>
     <key name="hide-intermediate-images" type="b">
       <default>false</default>
       <summary>Whether to hide intermediate images</summary>

From 6062700e150da9f2f05aa7140e2d3148b4e4107a Mon Sep 17 00:00:00 2001
From: Marcus Behrendt <marcus.behrendt.86@gmail.com>
Date: Fri, 11 Oct 2024 17:51:30 +0200
Subject: [PATCH 3/6] feat(view): Introduce `PdsContainersGridView`

This will soon be used as the grid view in the containers panel.
---
 src/main.rs                      |   1 +
 src/resources.gresource.xml      |   1 +
 src/view/containers_grid_view.rs | 113 +++++++++++++++++++++++++++++++
 src/view/containers_grid_view.ui |  36 ++++++++++
 src/view/mod.rs                  |   1 +
 5 files changed, 152 insertions(+)
 create mode 100644 src/view/containers_grid_view.rs
 create mode 100644 src/view/containers_grid_view.ui

diff --git a/src/main.rs b/src/main.rs
index 4ef3f021..6e4a2a13 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -211,6 +211,7 @@ fn init() {
     view::ContainerTerminalPage::static_type();
     view::ContainerVolumeRow::static_type();
     view::ContainersCountBar::static_type();
+    view::ContainersGridView::static_type();
     view::ContainersGroup::static_type();
     view::ContainersPanel::static_type();
     view::ContainersPrunePage::static_type();
diff --git a/src/resources.gresource.xml b/src/resources.gresource.xml
index c88c4535..ad15d386 100644
--- a/src/resources.gresource.xml
+++ b/src/resources.gresource.xml
@@ -30,6 +30,7 @@
     <file compressed="true" preprocess="xml-stripblanks">view/container_terminal_page.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/container_volume_row.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_count_bar.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">view/containers_grid_view.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_group.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_panel.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_prune_page.ui</file>
diff --git a/src/view/containers_grid_view.rs b/src/view/containers_grid_view.rs
new file mode 100644
index 00000000..ebd27a20
--- /dev/null
+++ b/src/view/containers_grid_view.rs
@@ -0,0 +1,113 @@
+use adw::prelude::*;
+use adw::subclass::prelude::*;
+use glib::Properties;
+use gtk::gio;
+use gtk::glib;
+use gtk::CompositeTemplate;
+
+use crate::utils;
+use crate::view;
+
+mod imp {
+    use super::*;
+
+    #[derive(Debug, Default, Properties, CompositeTemplate)]
+    #[properties(wrapper_type = super::ContainersGridView)]
+    #[template(resource = "/com/github/marhkb/Pods/ui/view/containers_grid_view.ui")]
+    pub(crate) struct ContainersGridView {
+        #[property(get, set = Self::set_model, nullable, construct)]
+        pub(super) model: glib::WeakRef<gio::ListModel>,
+        #[template_child]
+        pub(super) flow_box: TemplateChild<gtk::FlowBox>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for ContainersGridView {
+        const NAME: &'static str = "PdsContainersGridView";
+        type Type = super::ContainersGridView;
+        type ParentType = gtk::Widget;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.bind_template();
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
+    }
+
+    impl ObjectImpl for ContainersGridView {
+        fn properties() -> &'static [glib::ParamSpec] {
+            Self::derived_properties()
+        }
+
+        fn set_property(&self, id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            self.derived_set_property(id, value, pspec);
+        }
+
+        fn property(&self, id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            self.derived_property(id, pspec)
+        }
+
+        fn dispose(&self) {
+            utils::unparent_children(&*self.obj());
+        }
+    }
+
+    impl WidgetImpl for ContainersGridView {}
+
+    impl ContainersGridView {
+        pub(super) fn set_model(&self, value: Option<&gio::ListModel>) {
+            let obj = &*self.obj();
+            if obj.model().as_ref() == value {
+                return;
+            }
+
+            self.flow_box.bind_model(value, |item| {
+                gtk::FlowBoxChild::builder()
+                    .focusable(false)
+                    .child(&view::ContainerCard::from(item.downcast_ref().unwrap()))
+                    .build()
+                    .upcast()
+            });
+
+            self.model.set(value);
+        }
+    }
+}
+
+glib::wrapper! {
+    pub(crate) struct ContainersGridView(ObjectSubclass<imp::ContainersGridView>)
+        @extends gtk::Widget,
+        @implements gtk::Accessible, gtk::Buildable, gtk::ConstraintTarget;
+}
+
+impl Default for ContainersGridView {
+    fn default() -> Self {
+        glib::Object::builder().build()
+    }
+}
+
+impl From<Option<&gio::ListModel>> for ContainersGridView {
+    fn from(model: Option<&gio::ListModel>) -> Self {
+        glib::Object::builder().property("model", model).build()
+    }
+}
+
+impl ContainersGridView {
+    pub(crate) fn select_visible(&self) {
+        (0..)
+            .map(|pos| self.imp().flow_box.child_at_index(pos))
+            .take_while(Option::is_some)
+            .flatten()
+            .for_each(|row| {
+                row.child()
+                    .unwrap()
+                    .downcast_ref::<view::ContainerCard>()
+                    .unwrap()
+                    .container()
+                    .unwrap()
+                    .set_selected(row.is_visible());
+            });
+    }
+}
diff --git a/src/view/containers_grid_view.ui b/src/view/containers_grid_view.ui
new file mode 100644
index 00000000..074d70be
--- /dev/null
+++ b/src/view/containers_grid_view.ui
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<interface>
+
+  <template class="PdsContainersGridView" parent="GtkWidget">
+    <property name="layout-manager">
+      <object class="GtkBinLayout"/>
+    </property>
+
+    <child>
+      <object class="GtkScrolledWindow">
+
+        <child>
+          <object class="GtkFlowBox" id="flow_box">
+            <property name="column-spacing">21</property>
+            <property name="halign">center</property>
+            <property name="homogeneous">True</property>
+            <property name="max-children-per-line">5</property>
+            <property name="row-spacing">21</property>
+            <property name="selection-mode">none</property>
+            <property name="valign">start</property>
+
+            <property name="margin-top">30</property>
+            <property name="margin-bottom">30</property>
+            <property name="margin-start">36</property>
+            <property name="margin-end">36</property>
+
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </template>
+
+</interface>
diff --git a/src/view/mod.rs b/src/view/mod.rs
index 630f6ca6..2f6177ad 100644
--- a/src/view/mod.rs
+++ b/src/view/mod.rs
@@ -28,6 +28,7 @@ mod container_terminal;
 mod container_terminal_page;
 mod container_volume_row;
 mod containers_count_bar;
+mod containers_grid_view;
 mod containers_group;
 mod containers_panel;
 mod containers_prune_page;

From f8e8984edddc50046558194f7bfa8c9698a927b2 Mon Sep 17 00:00:00 2001
From: Marcus Behrendt <marcus.behrendt.86@gmail.com>
Date: Fri, 11 Oct 2024 17:52:41 +0200
Subject: [PATCH 4/6] feat(view): Introduce `PdsContainersListView`

We will soon be able to use this widget in the container panel as an
alternative to `PdsContainerGridView`.
---
 src/main.rs                      |   1 +
 src/resources.gresource.xml      |   1 +
 src/view/containers_list_view.rs | 107 +++++++++++++++++++++++++++++++
 src/view/containers_list_view.ui |  34 ++++++++++
 src/view/mod.rs                  |   3 +
 5 files changed, 146 insertions(+)
 create mode 100644 src/view/containers_list_view.rs
 create mode 100644 src/view/containers_list_view.ui

diff --git a/src/main.rs b/src/main.rs
index 6e4a2a13..2691c462 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -213,6 +213,7 @@ fn init() {
     view::ContainersCountBar::static_type();
     view::ContainersGridView::static_type();
     view::ContainersGroup::static_type();
+    view::ContainersListView::static_type();
     view::ContainersPanel::static_type();
     view::ContainersPrunePage::static_type();
     view::ContainersRow::static_type();
diff --git a/src/resources.gresource.xml b/src/resources.gresource.xml
index ad15d386..44c3d2e9 100644
--- a/src/resources.gresource.xml
+++ b/src/resources.gresource.xml
@@ -32,6 +32,7 @@
     <file compressed="true" preprocess="xml-stripblanks">view/containers_count_bar.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_grid_view.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_group.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">view/containers_list_view.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_panel.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_prune_page.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">view/containers_row.ui</file>
diff --git a/src/view/containers_list_view.rs b/src/view/containers_list_view.rs
new file mode 100644
index 00000000..107c4fca
--- /dev/null
+++ b/src/view/containers_list_view.rs
@@ -0,0 +1,107 @@
+use adw::prelude::*;
+use adw::subclass::prelude::*;
+use glib::Properties;
+use gtk::gio;
+use gtk::glib;
+use gtk::CompositeTemplate;
+
+use crate::utils;
+use crate::view;
+
+mod imp {
+    use super::*;
+
+    #[derive(Debug, Default, Properties, CompositeTemplate)]
+    #[properties(wrapper_type = super::ContainersListView)]
+    #[template(resource = "/com/github/marhkb/Pods/ui/view/containers_list_view.ui")]
+    pub(crate) struct ContainersListView {
+        #[property(get, set = Self::set_model, nullable, construct)]
+        pub(super) model: glib::WeakRef<gio::ListModel>,
+        #[template_child]
+        pub(super) list_box: TemplateChild<gtk::ListBox>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for ContainersListView {
+        const NAME: &'static str = "PdsContainersListView";
+        type Type = super::ContainersListView;
+        type ParentType = gtk::Widget;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.bind_template();
+        }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
+    }
+
+    impl ObjectImpl for ContainersListView {
+        fn properties() -> &'static [glib::ParamSpec] {
+            Self::derived_properties()
+        }
+
+        fn set_property(&self, id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
+            self.derived_set_property(id, value, pspec);
+        }
+
+        fn property(&self, id: usize, pspec: &glib::ParamSpec) -> glib::Value {
+            self.derived_property(id, pspec)
+        }
+
+        fn dispose(&self) {
+            utils::unparent_children(&*self.obj());
+        }
+    }
+
+    impl WidgetImpl for ContainersListView {}
+
+    impl ContainersListView {
+        pub(super) fn set_model(&self, value: Option<&gio::ListModel>) {
+            let obj = &*self.obj();
+            if obj.model().as_ref() == value {
+                return;
+            }
+
+            self.list_box.bind_model(value, |item| {
+                view::ContainerRow::from(item.downcast_ref().unwrap()).upcast()
+            });
+
+            self.model.set(value);
+        }
+    }
+}
+
+glib::wrapper! {
+    pub(crate) struct ContainersListView(ObjectSubclass<imp::ContainersListView>)
+        @extends gtk::Widget,
+        @implements gtk::Accessible, gtk::Buildable, gtk::ConstraintTarget;
+}
+
+impl Default for ContainersListView {
+    fn default() -> Self {
+        glib::Object::builder().build()
+    }
+}
+
+impl From<Option<&gio::ListModel>> for ContainersListView {
+    fn from(model: Option<&gio::ListModel>) -> Self {
+        glib::Object::builder().property("model", model).build()
+    }
+}
+
+impl ContainersListView {
+    pub(crate) fn select_visible(&self) {
+        (0..)
+            .map(|pos| self.imp().list_box.row_at_index(pos))
+            .take_while(Option::is_some)
+            .flatten()
+            .for_each(|row| {
+                row.downcast_ref::<view::ContainerRow>()
+                    .unwrap()
+                    .container()
+                    .unwrap()
+                    .set_selected(row.is_visible());
+            });
+    }
+}
diff --git a/src/view/containers_list_view.ui b/src/view/containers_list_view.ui
new file mode 100644
index 00000000..3de6dc20
--- /dev/null
+++ b/src/view/containers_list_view.ui
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<interface>
+
+  <template class="PdsContainersListView" parent="GtkWidget">
+    <property name="layout-manager">
+      <object class="GtkBinLayout"/>
+    </property>
+
+    <child>
+      <object class="AdwPreferencesPage">
+        <property name="vexpand">True</property>
+
+        <child>
+          <object class="AdwPreferencesGroup">
+
+            <child>
+              <object class="GtkListBox" id="list_box">
+                <style>
+                  <class name="boxed-list"/>
+                </style>
+                <property name="selection-mode">none</property>
+              </object>
+            </child>
+
+          </object>
+        </child>
+
+      </object>
+    </child>
+
+  </template>
+
+</interface>
diff --git a/src/view/mod.rs b/src/view/mod.rs
index 2f6177ad..466858b0 100644
--- a/src/view/mod.rs
+++ b/src/view/mod.rs
@@ -30,6 +30,7 @@ mod container_volume_row;
 mod containers_count_bar;
 mod containers_grid_view;
 mod containers_group;
+mod containers_list_view;
 mod containers_panel;
 mod containers_prune_page;
 mod containers_row;
@@ -113,7 +114,9 @@ pub(crate) use self::container_terminal::ContainerTerminal;
 pub(crate) use self::container_terminal_page::ContainerTerminalPage;
 pub(crate) use self::container_volume_row::ContainerVolumeRow;
 pub(crate) use self::containers_count_bar::ContainersCountBar;
+pub(crate) use self::containers_grid_view::ContainersGridView;
 pub(crate) use self::containers_group::ContainersGroup;
+pub(crate) use self::containers_list_view::ContainersListView;
 pub(crate) use self::containers_panel::ContainersPanel;
 pub(crate) use self::containers_prune_page::ContainersPrunePage;
 pub(crate) use self::containers_row::ContainersRow;

From 70297fe2bc868f2b8efdbe22d91bde6d71627d08 Mon Sep 17 00:00:00 2001
From: Marcus Behrendt <marcus.behrendt.86@gmail.com>
Date: Fri, 11 Oct 2024 17:54:09 +0200
Subject: [PATCH 5/6] feat(containers-panel): Allow switching between grid and
 list view

Fixes #828
---
 src/view/containers_panel.rs | 134 +++++++++++++++++++++++++++++------
 src/view/containers_panel.ui |  47 +++++-------
 2 files changed, 128 insertions(+), 53 deletions(-)

diff --git a/src/view/containers_panel.rs b/src/view/containers_panel.rs
index cb5529e5..8dfc7e9d 100644
--- a/src/view/containers_panel.rs
+++ b/src/view/containers_panel.rs
@@ -22,6 +22,7 @@ use crate::view;
 
 const ACTION_CREATE_CONTAINER: &str = "containers-panel.create-container";
 const ACTION_PRUNE_UNUSED_CONTAINERS: &str = "containers-panel.prune-unused-containers";
+const ACTION_TOGGLE_CONTAINERS_VIEW: &str = "containers-panel.toggle-containers-view";
 const ACTION_ENTER_SELECTION_MODE: &str = "containers-panel.enter-selection-mode";
 const ACTION_EXIT_SELECTION_MODE: &str = "containers-panel.exit-selection-mode";
 const ACTION_SELECT_VISIBLE: &str = "containers-panel.select-visible";
@@ -45,6 +46,35 @@ const ACTIONS_SELECTION: &[&str] = &[
     ACTION_DELETE_SELECTION,
 ];
 
+#[derive(Debug)]
+enum ContainersView {
+    Grid(view::ContainersGridView),
+    List(view::ContainersListView),
+}
+
+impl ContainersView {
+    fn view(&self) -> &gtk::Widget {
+        match self {
+            Self::Grid(view) => view.upcast_ref(),
+            Self::List(view) => view.upcast_ref(),
+        }
+    }
+
+    fn set_model(&self, model: Option<&gio::ListModel>) {
+        match self {
+            Self::Grid(view) => view.set_model(model),
+            Self::List(view) => view.set_model(model),
+        }
+    }
+
+    pub(crate) fn select_visible(&self) {
+        match self {
+            Self::Grid(view) => view.select_visible(),
+            Self::List(view) => view.select_visible(),
+        }
+    }
+}
+
 mod imp {
     use super::*;
 
@@ -53,9 +83,11 @@ mod imp {
     #[template(resource = "/com/github/marhkb/Pods/ui/view/containers_panel.ui")]
     pub(crate) struct ContainersPanel {
         pub(super) settings: utils::PodsSettings,
+        pub(super) containers_view: RefCell<Option<ContainersView>>,
         pub(super) filter: OnceCell<gtk::Filter>,
         pub(super) sorter: OnceCell<gtk::Sorter>,
         pub(super) search_term: RefCell<String>,
+        pub(super) model: RefCell<Option<gio::ListModel>>,
         #[property(get, set = Self::set_container_list, nullable)]
         pub(super) container_list: glib::WeakRef<model::ContainerList>,
         #[property(get, set)]
@@ -71,6 +103,8 @@ mod imp {
         #[template_child]
         pub(super) window_title: TemplateChild<adw::WindowTitle>,
         #[template_child]
+        pub(super) view_options_split_button_1: TemplateChild<adw::SplitButton>,
+        #[template_child]
         pub(super) selected_containers_button: TemplateChild<gtk::MenuButton>,
         #[template_child]
         pub(super) search_bar: TemplateChild<gtk::SearchBar>,
@@ -79,9 +113,11 @@ mod imp {
         #[template_child]
         pub(super) filter_stack: TemplateChild<gtk::Stack>,
         #[template_child]
-        pub(super) flow_box: TemplateChild<gtk::FlowBox>,
+        pub(super) containers_view_bin: TemplateChild<adw::Bin>,
         #[template_child]
         pub(super) overhang_action_bar: TemplateChild<gtk::ActionBar>,
+        #[template_child]
+        pub(super) view_options_split_button_2: TemplateChild<adw::SplitButton>,
     }
 
     #[glib::object_subclass]
@@ -107,6 +143,10 @@ mod imp {
                 widget.show_prune_page();
             });
 
+            klass.install_action(ACTION_TOGGLE_CONTAINERS_VIEW, None, |widget, _, _| {
+                widget.toggle_containers_view();
+            });
+
             klass.install_action(ACTION_ENTER_SELECTION_MODE, None, |widget, _, _| {
                 widget.enter_selection_mode();
             });
@@ -177,6 +217,18 @@ mod imp {
 
             let obj = &*self.obj();
 
+            self.set_containers_view();
+            self.settings.connect_changed(
+                Some("containers-view"),
+                clone!(
+                    #[weak]
+                    obj,
+                    move |_, _| {
+                        obj.imp().set_containers_view();
+                    }
+                ),
+            );
+
             self.settings
                 .bind(
                     "show-only-running-containers",
@@ -367,6 +419,40 @@ mod imp {
 
     #[gtk::template_callbacks]
     impl ContainersPanel {
+        fn set_containers_view(&self) {
+            let model = self.model.borrow();
+            let view = if self.settings.string("containers-view") == "grid" {
+                self.view_options_split_button_1
+                    .set_icon_name("view-list-symbolic");
+                self.view_options_split_button_2
+                    .set_icon_name("view-list-symbolic");
+
+                let tooltip = gettext("List View");
+                self.view_options_split_button_1
+                    .set_tooltip_text(Some(&tooltip));
+                self.view_options_split_button_2
+                    .set_tooltip_text(Some(&tooltip));
+
+                ContainersView::Grid(view::ContainersGridView::from(model.as_ref()))
+            } else {
+                self.view_options_split_button_1
+                    .set_icon_name("view-grid-symbolic");
+                self.view_options_split_button_2
+                    .set_icon_name("view-grid-symbolic");
+
+                let tooltip = gettext("Grid View");
+                self.view_options_split_button_1
+                    .set_tooltip_text(Some(&tooltip));
+                self.view_options_split_button_2
+                    .set_tooltip_text(Some(&tooltip));
+
+                ContainersView::List(view::ContainersListView::from(model.as_ref()))
+            };
+
+            self.containers_view_bin.set_child(Some(view.view()));
+            self.containers_view.replace(Some(view));
+        }
+
         #[template_callback]
         fn on_notify_show_only_running_containers(&self) {
             self.update_filter(if self.obj().show_only_running_containers() {
@@ -446,7 +532,7 @@ mod imp {
                     }
                 ));
 
-                let model = gtk::SortListModel::new(
+                let model: gtk::SortListModel = gtk::SortListModel::new(
                     Some(gtk::FilterListModel::new(
                         Some(container_list.to_owned()),
                         self.filter.get().cloned(),
@@ -454,13 +540,9 @@ mod imp {
                     self.sorter.get().cloned(),
                 );
 
-                self.flow_box.bind_model(Some(&model), |item| {
-                    gtk::FlowBoxChild::builder()
-                        .focusable(false)
-                        .child(&view::ContainerCard::from(item.downcast_ref().unwrap()))
-                        .build()
-                        .upcast()
-                });
+                if let Some(view) = &*self.containers_view.borrow() {
+                    view.set_model(Some(model.upcast_ref()));
+                }
 
                 model.connect_items_changed(clone!(
                     #[weak]
@@ -473,7 +555,7 @@ mod imp {
                                     .as_ref()
                                     .is_some_and(model::ContainerList::initialized)
                             {
-                                "list"
+                                "containers"
                             } else {
                                 "empty"
                             },
@@ -484,6 +566,8 @@ mod imp {
                         }
                     }
                 ));
+
+                self.model.replace(Some(model.upcast()));
             }
 
             self.container_list.set(value);
@@ -554,6 +638,20 @@ impl ContainersPanel {
         }
     }
 
+    pub(crate) fn toggle_containers_view(&self) {
+        let settings = &self.imp().settings;
+        settings
+            .set_string(
+                "containers-view",
+                if settings.string("containers-view") == "grid" {
+                    "list"
+                } else {
+                    "grid"
+                },
+            )
+            .unwrap();
+    }
+
     pub(crate) fn enter_selection_mode(&self) {
         if let Some(list) = self.container_list().filter(|list| list.len() > 0) {
             list.select_none();
@@ -568,19 +666,9 @@ impl ContainersPanel {
     }
 
     pub(crate) fn select_visible(&self) {
-        (0..)
-            .map(|pos| self.imp().flow_box.child_at_index(pos))
-            .take_while(Option::is_some)
-            .flatten()
-            .for_each(|row| {
-                row.child()
-                    .unwrap()
-                    .downcast_ref::<view::ContainerCard>()
-                    .unwrap()
-                    .container()
-                    .unwrap()
-                    .set_selected(row.is_visible());
-            });
+        if let Some(view) = &*self.imp().containers_view.borrow() {
+            view.select_visible();
+        }
     }
 
     pub(crate) fn select_none(&self) {
diff --git a/src/view/containers_panel.ui b/src/view/containers_panel.ui
index 95aa1616..41f4a3ce 100644
--- a/src/view/containers_panel.ui
+++ b/src/view/containers_panel.ui
@@ -1,6 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
 
+  <menu id="view-options-menu">
+    <section>
+      <item>
+        <attribute name="label" translatable="yes">_Hide Non-Running</attribute>
+        <attribute name="action">containers-panel.toggle-show-only-running-containers</attribute>
+      </item>
+    </section>
+  </menu>
+
   <menu id="selection-menu">
     <item>
       <attribute name="label" translatable="yes">_Select Visible</attribute>
@@ -112,11 +121,10 @@
                             </child>
 
                             <child type="end">
-                              <object class="GtkToggleButton">
+                              <object class="AdwSplitButton" id="view_options_split_button_1">
                                 <property name="visible" bind-source="PdsContainersPanel" bind-property="collapsed" bind-flags="sync-create|invert-boolean"/>
-                                <property name="action-name">containers-panel.toggle-show-only-running-containers</property>
-                                <property name="icon-name">funnel-symbolic</property>
-                                <property name="tooltip-text" translatable="yes">Show Only Running Containers</property>
+                                <property name="action-name">containers-panel.toggle-containers-view</property>
+                                <property name="menu-model">view-options-menu</property>
                               </object>
                             </child>
 
@@ -180,30 +188,10 @@
 
                     <child>
                       <object class="GtkStackPage">
-                        <property name="name">list</property>
+                        <property name="name">containers</property>
 
                         <property name="child">
-                          <object class="GtkScrolledWindow">
-
-                            <child>
-                              <object class="GtkFlowBox" id="flow_box">
-                                <property name="column-spacing">21</property>
-                                <property name="halign">center</property>
-                                <property name="homogeneous">True</property>
-                                <property name="max-children-per-line">5</property>
-                                <property name="row-spacing">21</property>
-                                <property name="selection-mode">none</property>
-                                <property name="valign">start</property>
-
-                                <property name="margin-top">30</property>
-                                <property name="margin-bottom">30</property>
-                                <property name="margin-start">36</property>
-                                <property name="margin-end">36</property>
-
-                              </object>
-                            </child>
-
-                          </object>
+                          <object class="AdwBin" id="containers_view_bin"/>
                         </property>
 
                       </object>
@@ -393,10 +381,9 @@
                     </child>
 
                     <child type="end">
-                      <object class="GtkToggleButton">
-                        <property name="action-name">containers-panel.toggle-show-only-running-containers</property>
-                        <property name="icon-name">funnel-symbolic</property>
-                        <property name="tooltip-text" translatable="yes">Show Only Running Containers</property>
+                      <object class="AdwSplitButton" id="view_options_split_button_2">
+                        <property name="action-name">containers-panel.toggle-containers-view</property>
+                        <property name="menu-model">view-options-menu</property>
                       </object>
                     </child>
 

From 280b888191424dfbeaabf65f801f1f02fb15cb0e Mon Sep 17 00:00:00 2001
From: Marcus Behrendt <marcus.behrendt.86@gmail.com>
Date: Fri, 11 Oct 2024 21:27:44 +0200
Subject: [PATCH 6/6] docs(appdata): Update changelog

---
 data/com.github.marhkb.Pods.metainfo.xml.in.in | 1 +
 1 file changed, 1 insertion(+)

diff --git a/data/com.github.marhkb.Pods.metainfo.xml.in.in b/data/com.github.marhkb.Pods.metainfo.xml.in.in
index 0a6f8203..2a52cc9b 100644
--- a/data/com.github.marhkb.Pods.metainfo.xml.in.in
+++ b/data/com.github.marhkb.Pods.metainfo.xml.in.in
@@ -46,6 +46,7 @@
           <li>The search entry to a toggle button in the headerbar. (#830)</li>
           <li>Search is now possible in the connection chooser page. (#830)</li>
           <li>The control elements of the header bar are now moved to a lower bar if space becomes too tight. (#837)</li>
+          <li>Allow switching between grid and list view in the containers panel. (#838)</li>
         </ul>
       </description>
     </release>