From 951293525698c31d561cc011ff05d5184c6b28b5 Mon Sep 17 00:00:00 2001
From: Danny Willems <be.danny.willems@gmail.com>
Date: Sun, 8 Feb 2026 12:59:38 -0300
Subject: [PATCH] Replace remaining Element::<> builders with html! macro

Convert all 29 Element::<X>::new() patterns to html! macro syntax
across list.rs, detail.rs, and blog_admin.rs. Remove unused imports
(Element, Form, Nav, Th, Tr) that are now resolved internally by
the macro.
---
 crates/oxide-admin/examples/blog_admin.rs  |  51 +++----
 crates/oxide-admin/src/templates/detail.rs |  22 +---
 crates/oxide-admin/src/templates/list.rs   | 146 ++++++++++-----------
 3 files changed, 96 insertions(+), 123 deletions(-)

diff --git a/crates/oxide-admin/examples/blog_admin.rs b/crates/oxide-admin/examples/blog_admin.rs
index e540103..51855d1 100644
--- a/crates/oxide-admin/examples/blog_admin.rs
+++ b/crates/oxide-admin/examples/blog_admin.rs
@@ -37,10 +37,9 @@ use oxide_sql_core::builder::{col, Delete, Insert, Select, Update};
 use oxide_sql_derive::Table;
 
 use ironhtml::html;
-use ironhtml::typed::{Document, Element};
+use ironhtml::typed::Document;
 use ironhtml_elements::{
-    Body, Div, Form, Head, Html, Li, Main, Meta, Nav, Option_, Script, Select as SelectEl, Td, Th,
-    Title, Tr, Ul,
+    Body, Div, Form, Head, Html, Li, Main, Meta, Option_, Script, Select as SelectEl, Td, Title, Ul,
 };
 
 // ============================================================================
@@ -754,7 +753,7 @@ async fn delete_comment_handler(req: Request, state: AppState) -> Response {
             };
             let confirm_btn_r = confirm_btn.render();
             let cancel_link_r = cancel_link.render();
-            let content = Element::<Div>::new()
+            let content = (html! { div })
                 .raw(heading.render())
                 .child::<Div, _>(|d| {
                     d.class("delete-confirmation max-w-2xl")
@@ -927,7 +926,7 @@ async fn delete_tag_handler(req: Request, state: AppState) -> Response {
             };
             let confirm_btn_r = confirm_btn.render();
             let cancel_link_r = cancel_link.render();
-            let content = Element::<Div>::new()
+            let content = (html! { div })
                 .raw(heading.render())
                 .child::<Div, _>(|d| {
                     d.class("delete-confirmation max-w-2xl")
@@ -1043,8 +1042,7 @@ fn render_sidebar() -> String {
     let logout_r = logout_link.render();
     let hr = html! { hr.class("my-6 border-gray-600") };
 
-    Element::<Nav>::new()
-        .class("w-64 min-h-screen bg-gray-800 text-gray-300 flex-shrink-0")
+    (html! { nav.class("w-64 min-h-screen bg-gray-800 text-gray-300 flex-shrink-0") })
         .child::<Div, _>(|d| {
             d.class("sticky top-0 p-4")
                 .raw(heading.render())
@@ -1103,8 +1101,7 @@ fn render_login_page(error: Option<&str>) -> String {
     let password_input_r = password_input.render();
     let submit_btn_r = submit_btn.render();
 
-    let content = Element::<Div>::new()
-        .class("min-h-screen flex items-center justify-center")
+    let content = (html! { div.class("min-h-screen flex items-center justify-center") })
         .child::<Div, _>(|d| {
             d.class("w-full max-w-md").child::<Div, _>(|d| {
                 d.class("bg-white rounded-lg shadow-sm border border-gray-200")
@@ -1196,7 +1193,7 @@ fn render_dashboard(store: &DataStore) -> String {
     let heading = html! {
         h1.class("text-2xl font-semibold text-gray-900 mb-6") { "Dashboard" }
     };
-    let content = Element::<Div>::new()
+    let content = (html! { div })
         .raw(heading.render())
         .child::<Div, _>(|d| d.class("grid grid-cols-1 md:grid-cols-3 gap-6").raw(&cards))
         .render();
@@ -1254,8 +1251,7 @@ fn render_post_list(
         let edit_link_r = edit_link.render();
         let del_link_r = del_link.render();
         let created_ref = &p.created_at;
-        Element::<Tr>::new()
-            .class("border-b border-gray-100 hover:bg-gray-50")
+        (html! { tr.class("border-b border-gray-100 hover:bg-gray-50") })
             .child::<Td, _>(|td| td.class("px-4 py-3").raw(&checkbox_r))
             .child::<Td, _>(|td| td.class("px-4 py-3 text-gray-600").text(&id_str))
             .child::<Td, _>(|td| td.class("px-4 py-3").raw(&title_link_r))
@@ -1283,7 +1279,7 @@ fn render_post_list(
     let add_btn = html! {
         a.href("/admin/posts/add/").class("px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200") { "+ Add Post" }
     };
-    let content = Element::<Div>::new()
+    let content = (html! { div })
         .child::<Div, _>(|d| {
             d.class("flex justify-between items-center mb-6")
                 .raw(page_heading.render())
@@ -1355,14 +1351,12 @@ fn render_action_form_wrapper(
             let sort_link = html! {
                 a.href(#href_val).class("hover:text-gray-900") { #h_val }
             };
-            Element::<Th>::new()
-                .class(th_class)
+            (html! { th.class(#th_class) })
                 .bool_attr("data-sortable")
                 .raw(sort_link.render())
                 .render_to(&mut header_cells);
         } else {
-            Element::<Th>::new()
-                .class(th_class)
+            (html! { th.class(#th_class) })
                 .text(*h)
                 .render_to(&mut header_cells);
         }
@@ -1381,9 +1375,7 @@ fn render_action_form_wrapper(
     };
     let apply_btn_r = apply_btn.render();
 
-    Element::<Form>::new()
-        .attr("method", "POST")
-        .attr("action", action_url)
+    (html! { form.method("POST").action(#action_url) })
         .child::<Div, _>(|d| {
             d.class("bg-white rounded-lg shadow-sm border border-gray-200")
                 .child::<Div, _>(|d| {
@@ -1425,8 +1417,7 @@ fn render_pagination_nav(page: usize, total_pages: usize) -> String {
         };
         link.render_to(&mut links);
     }
-    Element::<Nav>::new()
-        .class("mt-6 flex justify-center")
+    (html! { nav.class("mt-6 flex justify-center") })
         .child::<Div, _>(|d| d.class("flex gap-1").raw(&links))
         .render()
 }
@@ -1501,7 +1492,7 @@ fn render_post_form(post: Option<&Post>, error: Option<&str>) -> String {
     let content_textarea_r = content_textarea.render();
     let status_label_r = status_label.render();
 
-    let content = Element::<Div>::new()
+    let content = (html! { div })
         .raw(heading.render())
         .raw(&error_html)
         .child::<Form, _>(|f| {
@@ -1610,7 +1601,7 @@ fn render_delete_page(
     };
     let confirm_btn_r = confirm_btn.render();
     let cancel_link_r = cancel_link.render();
-    let content = Element::<Div>::new()
+    let content = (html! { div })
         .raw(heading.render())
         .child::<Div, _>(|d| {
             d.class("delete-confirmation max-w-2xl")
@@ -1649,7 +1640,7 @@ fn render_list_page(
         a.href(#add_url).class("px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200") { #add_label }
     };
 
-    let content = Element::<Div>::new()
+    let content = (html! { div })
         .child::<Div, _>(|d| {
             d.class("flex justify-between items-center mb-6")
                 .raw(heading.render())
@@ -1707,8 +1698,7 @@ fn render_comment_list(comments: &[&Comment], search: &str) -> String {
         let del_link_r = del_link.render();
         let author_ref = &c.author;
         let created_ref = &c.created_at;
-        Element::<Tr>::new()
-            .class("border-b border-gray-100 hover:bg-gray-50")
+        (html! { tr.class("border-b border-gray-100 hover:bg-gray-50") })
             .child::<Td, _>(|td| td.class("px-4 py-3").raw(&checkbox_r))
             .child::<Td, _>(|td| td.class("px-4 py-3").raw(&id_link_r))
             .child::<Td, _>(|td| td.class("px-4 py-3 text-gray-600").text(&post_id_str))
@@ -1790,7 +1780,7 @@ fn render_comment_form(comment: Option<&Comment>, error: Option<&str>) -> String
     let content_label_r = content_label.render();
     let content_textarea_r = content_textarea.render();
 
-    let content = Element::<Div>::new()
+    let content = (html! { div })
         .raw(heading.render())
         .raw(&error_html)
         .child::<Form, _>(|f| {
@@ -1842,8 +1832,7 @@ fn render_tag_list(tags: &[&Tag], search: &str) -> String {
         let edit_link_r = edit_link.render();
         let del_link_r = del_link.render();
         let slug_ref = &t.slug;
-        Element::<Tr>::new()
-            .class("border-b border-gray-100 hover:bg-gray-50")
+        (html! { tr.class("border-b border-gray-100 hover:bg-gray-50") })
             .child::<Td, _>(|td| td.class("px-4 py-3").raw(&checkbox_r))
             .child::<Td, _>(|td| td.class("px-4 py-3 text-gray-600").text(&id_str))
             .child::<Td, _>(|td| td.class("px-4 py-3").raw(&name_link_r))
@@ -1909,7 +1898,7 @@ fn render_tag_form(tag: Option<&Tag>, error: Option<&str>) -> String {
     let slug_label_r = slug_label.render();
     let slug_input_r = slug_input.render();
 
-    let content = Element::<Div>::new()
+    let content = (html! { div })
         .raw(heading.render())
         .raw(&error_html)
         .child::<Form, _>(|f| {
diff --git a/crates/oxide-admin/src/templates/detail.rs b/crates/oxide-admin/src/templates/detail.rs
index 292cc3b..99c0883 100644
--- a/crates/oxide-admin/src/templates/detail.rs
+++ b/crates/oxide-admin/src/templates/detail.rs
@@ -2,7 +2,7 @@
 
 use ironhtml::html;
 use ironhtml::typed::Element;
-use ironhtml_elements::{Div, Form, Li, Tbody, Td, Th, Tr, P};
+use ironhtml_elements::{Div, Li, Tbody, Td, Th, Tr, P};
 
 /// Context for rendering a detail/edit view.
 #[derive(Debug, Clone)]
@@ -109,10 +109,8 @@ pub fn render_detail_view(ctx: &DetailViewContext) -> String {
         }
     };
 
-    Element::<Form>::new()
-        .attr("method", "post")
+    html! { form.method("post").enctype("multipart/form-data") }
         .attr("action", &ctx.action_url)
-        .attr("enctype", "multipart/form-data")
         .child::<Div, _>(|d| d.raw(&errors_html))
         .child::<Div, _>(|d| {
             d.class("row")
@@ -184,9 +182,7 @@ fn render_errors(errors: &[String]) -> String {
         strong { "Please correct the errors below:" }
     };
 
-    Element::<Div>::new()
-        .class("alert alert-danger")
-        .attr("role", "alert")
+    html! { div.class("alert alert-danger").role("alert") }
         .raw(heading.render())
         .child::<ironhtml_elements::Ul, _>(|ul| {
             ul.class("mb-0 mt-2")
@@ -197,8 +193,7 @@ fn render_errors(errors: &[String]) -> String {
 
 fn render_fieldsets(fieldsets: &[Fieldset], form_html: &str) -> String {
     if fieldsets.is_empty() {
-        return Element::<Div>::new()
-            .class("card mb-4")
+        return html! { div.class("card mb-4") }
             .child::<Div, _>(|d| d.class("card-body").raw(form_html))
             .render();
     }
@@ -230,8 +225,7 @@ fn render_fieldsets(fieldsets: &[Fieldset], form_html: &str) -> String {
                     i.class("bi bi-chevron-down")
                 }
             };
-            Element::<Div>::new()
-                .class("card mb-4")
+            html! { div.class("card mb-4") }
                 .child::<Div, _>(|d| {
                     d.class(
                         "card-header d-flex \
@@ -253,8 +247,7 @@ fn render_fieldsets(fieldsets: &[Fieldset], form_html: &str) -> String {
                     })
                 })
         } else {
-            Element::<Div>::new()
-                .class("card mb-4")
+            html! { div.class("card mb-4") }
                 .when(fieldset.name.is_some(), |d| {
                     d.child::<Div, _>(|d| {
                         d.class("card-header")
@@ -303,8 +296,7 @@ fn render_inlines(inlines: &[InlineFormset]) -> String {
             }
         };
 
-        let el = Element::<Div>::new()
-            .class("card mb-4")
+        let el = html! { div.class("card mb-4") }
             .raw(header.render())
             .child::<Div, _>(|d| {
                 d.class("card-body p-0").child::<Div, _>(|d| {
diff --git a/crates/oxide-admin/src/templates/list.rs b/crates/oxide-admin/src/templates/list.rs
index d72baf0..24e652f 100644
--- a/crates/oxide-admin/src/templates/list.rs
+++ b/crates/oxide-admin/src/templates/list.rs
@@ -3,7 +3,7 @@
 use ironhtml::html;
 use ironhtml::typed::Element;
 use ironhtml_elements::{
-    Div, Form, Li, Nav, Option_ as OptEl, Select, Table, Tbody, Td, Th, Thead, Tr, Ul, A,
+    Div, Li, Nav, Option_ as OptEl, Select, Table, Tbody, Td, Th, Thead, Tr, Ul, A,
 };
 
 /// Context for rendering a list view.
@@ -116,7 +116,7 @@ pub fn render_list_view(ctx: &ListViewContext) -> String {
         }
     };
 
-    Element::<Div>::new()
+    html! { div }
         .child::<Div, _>(|d| {
             d.class(
                 "d-flex justify-content-between \
@@ -199,8 +199,7 @@ fn render_filters(filters: &[ListFilter], active: &[(String, String)]) -> String
             a.href("?").class(#all_class) { "All" }
         };
 
-        let el = Element::<Div>::new()
-            .class("card mb-3")
+        let el = html! { div.class("card mb-3") }
             .child::<Div, _>(|d| d.class("card-header").text(&filter.label))
             .child::<Div, _>(|d| {
                 let d = d
@@ -237,10 +236,7 @@ fn render_actions(actions: &[(String, String)]) -> String {
         }
     };
 
-    Element::<Form>::new()
-        .attr("method", "post")
-        .attr("action", "")
-        .class("bulk-actions")
+    html! { form.method("post").action("").class("bulk-actions") }
         .child::<Select, _>(|s| {
             let s = s
                 .attr("name", "action")
@@ -266,8 +262,7 @@ fn render_table(ctx: &ListViewContext) -> String {
         .render();
     }
 
-    Element::<Div>::new()
-        .class("table-responsive")
+    html! { div.class("table-responsive") }
         .child::<Table, _>(|t| {
             t.class("table table-striped table-hover mb-0")
                 .child::<Thead, _>(|thead| {
@@ -376,82 +371,79 @@ fn render_pagination(ctx: &ListViewContext) -> String {
         span.class("text-muted") { #showing_text }
     };
 
-    Element::<Div>::new()
-        .class(
-            "d-flex justify-content-between \
-             align-items-center",
+    html! {
+        div.class(
+            "d-flex justify-content-between align-items-center"
         )
-        .raw(showing_span.render())
-        .child::<Nav, _>(|nav| {
-            nav.child::<Ul, _>(|ul| {
-                let mut ul = ul.class("pagination pagination-sm mb-0");
-
-                // Previous button
-                if ctx.page > 1 {
-                    let prev_href = format!("?page={}", ctx.page - 1);
-                    let link = html! {
-                        a.class("page-link").href(#prev_href) {
-                            "&laquo;"
-                        }
-                    };
-                    ul = ul.child::<Li, _>(|li| li.class("page-item").raw(link.render()));
-                } else {
-                    let disabled = html! {
-                        span.class("page-link") { "&laquo;" }
-                    };
-                    ul = ul
-                        .child::<Li, _>(|li| li.class("page-item disabled").raw(disabled.render()));
-                }
-
-                // Page numbers
-                for p in 1..=ctx.total_pages {
-                    let p_str = p.to_string();
-                    if p == ctx.page {
-                        let active_span = html! {
-                            span.class("page-link") { #p_str }
-                        };
-                        ul = ul.child::<Li, _>(|li| {
-                            li.class("page-item active").raw(active_span.render())
-                        });
-                    } else if (p as isize - ctx.page as isize).abs() <= 2
-                        || p == 1
-                        || p == ctx.total_pages
-                    {
-                        let href = format!("?page={}", p);
-                        let link = html! {
-                            a.class("page-link").href(#href) {
-                                #p_str
-                            }
-                        };
-                        ul = ul.child::<Li, _>(|li| li.class("page-item").raw(link.render()));
-                    } else if (p as isize - ctx.page as isize).abs() == 3 {
-                        let dots = html! {
-                            span.class("page-link") { "..." }
-                        };
-                        ul = ul
-                            .child::<Li, _>(|li| li.class("page-item disabled").raw(dots.render()));
+    }
+    .raw(showing_span.render())
+    .child::<Nav, _>(|nav| {
+        nav.child::<Ul, _>(|ul| {
+            let mut ul = ul.class("pagination pagination-sm mb-0");
+
+            // Previous button
+            if ctx.page > 1 {
+                let prev_href = format!("?page={}", ctx.page - 1);
+                let link = html! {
+                    a.class("page-link").href(#prev_href) {
+                        "&laquo;"
                     }
-                }
+                };
+                ul = ul.child::<Li, _>(|li| li.class("page-item").raw(link.render()));
+            } else {
+                let disabled = html! {
+                    span.class("page-link") { "&laquo;" }
+                };
+                ul = ul.child::<Li, _>(|li| li.class("page-item disabled").raw(disabled.render()));
+            }
 
-                // Next button
-                if ctx.page < ctx.total_pages {
-                    let next_href = format!("?page={}", ctx.page + 1);
+            // Page numbers
+            for p in 1..=ctx.total_pages {
+                let p_str = p.to_string();
+                if p == ctx.page {
+                    let active_span = html! {
+                        span.class("page-link") { #p_str }
+                    };
+                    ul = ul.child::<Li, _>(|li| {
+                        li.class("page-item active").raw(active_span.render())
+                    });
+                } else if (p as isize - ctx.page as isize).abs() <= 2
+                    || p == 1
+                    || p == ctx.total_pages
+                {
+                    let href = format!("?page={}", p);
                     let link = html! {
-                        a.class("page-link").href(#next_href) {
-                            "&raquo;"
+                        a.class("page-link").href(#href) {
+                            #p_str
                         }
                     };
                     ul = ul.child::<Li, _>(|li| li.class("page-item").raw(link.render()));
-                } else {
-                    let disabled = html! {
-                        span.class("page-link") { "&raquo;" }
+                } else if (p as isize - ctx.page as isize).abs() == 3 {
+                    let dots = html! {
+                        span.class("page-link") { "..." }
                     };
-                    ul = ul
-                        .child::<Li, _>(|li| li.class("page-item disabled").raw(disabled.render()));
+                    ul = ul.child::<Li, _>(|li| li.class("page-item disabled").raw(dots.render()));
                 }
+            }
 
-                ul
-            })
+            // Next button
+            if ctx.page < ctx.total_pages {
+                let next_href = format!("?page={}", ctx.page + 1);
+                let link = html! {
+                    a.class("page-link").href(#next_href) {
+                        "&raquo;"
+                    }
+                };
+                ul = ul.child::<Li, _>(|li| li.class("page-item").raw(link.render()));
+            } else {
+                let disabled = html! {
+                    span.class("page-link") { "&raquo;" }
+                };
+                ul = ul.child::<Li, _>(|li| li.class("page-item disabled").raw(disabled.render()));
+            }
+
+            ul
         })
-        .render()
+    })
+    .render()
 }