feat: use `pane_grid::Controls` for PaneGrid titlebar controls

2 files changed, 51 insertions, 27 deletions

diff --git a/src/panes/code_view.rs b/src/panes/code_view.rs
index 551347c..85b0bbe 100644
--- a/src/panes/code_view.rs
+++ b/src/panes/code_view.rs
@@ -22,25 +22,40 @@ pub fn view(
     editor_content: &text_editor::Content,
     is_focused: bool,
 ) -> pane_grid::Content<'_, Message> {
-    let title = row![
-        text("Generated Code"),
-        Space::with_width(Length::Fill),
-        tip(
-            button(icon::copy())
-                .on_press(Message::CopyCode)
-                .padding([2, 7])
-                .style(button::text),
-            "Copy",
-            tip::Position::FollowCursor
-        ),
-        Space::with_width(20),
-        button("Switch to Designer view")
-            .on_press(Message::SwitchPage(DesignerPane::DesignerView))
-    ]
-    .align_y(Alignment::Center);
-    let title_bar = pane_grid::TitleBar::new(title)
+    let title_bar = pane_grid::TitleBar::new(text("Generated Code").center())
+        .controls(pane_grid::Controls::dynamic(
+            row![
+                tip(
+                    button(icon::copy())
+                        .on_press(Message::CopyCode)
+                        .padding([2, 7])
+                        .style(button::text),
+                    "Copy",
+                    tip::Position::FollowCursor
+                ),
+                Space::with_width(20),
+                button("Switch to Designer view")
+                    .on_press(Message::SwitchPage(DesignerPane::DesignerView))
+            ]
+            .align_y(Alignment::Center),
+            row![
+                tip(
+                    button(icon::copy())
+                        .on_press(Message::CopyCode)
+                        .padding([2, 7])
+                        .style(button::text),
+                    "Copy",
+                    tip::Position::FollowCursor
+                ),
+                Space::with_width(20),
+                button(icon::switch())
+                    .on_press(Message::SwitchPage(DesignerPane::DesignerView))
+            ]
+            .align_y(Alignment::Center),
+        ))
         .padding(10)
         .style(style::title_bar);
+
     pane_grid::Content::new(
         text_editor(editor_content)
             .on_action(Message::EditorAction)
diff --git a/src/panes/designer_view.rs b/src/panes/designer_view.rs
index 69ff750..af72022 100644
--- a/src/panes/designer_view.rs
+++ b/src/panes/designer_view.rs
@@ -1,9 +1,10 @@
 use iced::widget::{
-    Space, button, center, container, pane_grid, responsive, row, text, themer,
+    button, center, container, pane_grid, responsive, row, text, themer,
 };
 use iced::{Alignment, Element, Length};
 
 use super::style;
+use crate::icon;
 use crate::types::{DesignerPane, Message, RenderedElement};
 
 pub fn view<'a>(
@@ -24,22 +25,30 @@ pub fn view<'a>(
             .into()
         })
         .into(),
-        None => text("Open a project or begin creating one").into(),
+        None => center("Open a project or begin creating one").into(),
     };
+
     let content = container(themer(designer_theme, el_tree))
         .id(iced::widget::container::Id::new("drop_zone"))
         .height(Length::Fill)
         .width(Length::Fill);
-    let title = row![
-        text("Designer"),
-        Space::with_width(Length::Fill),
-        button("Switch to Code view")
-            .on_press(Message::SwitchPage(DesignerPane::CodeView)),
-    ]
-    .align_y(Alignment::Center);
-    let title_bar = pane_grid::TitleBar::new(title)
+
+    let title_bar = pane_grid::TitleBar::new(text("Designer").center())
+        .controls(pane_grid::Controls::dynamic(
+            row![
+                button("Switch to Code view")
+                    .on_press(Message::SwitchPage(DesignerPane::CodeView),)
+            ]
+            .align_y(Alignment::Center),
+            row![
+                button(icon::switch())
+                    .on_press(Message::SwitchPage(DesignerPane::CodeView),)
+            ]
+            .align_y(Alignment::Center),
+        ))
         .padding(10)
         .style(style::title_bar);
+
     pane_grid::Content::new(content)
         .title_bar(title_bar)
         .style(if is_focused {