update

src/ui/appbar.rs

@@ -0,0 +1,68 @@
+use maud::{Markup, Render};
+
+use crate::auth::User;
+
+use crate::ui::basic::*;
+
+use super::UIWidget;
+
+#[allow(non_snake_case)]
+pub fn AppBar(name: &str, user: Option<User>) -> AppBarWidget {
+    AppBarWidget {
+        name: name.to_owned(),
+        user,
+    }
+}
+
+pub struct AppBarWidget {
+    name: String,
+    user: Option<User>,
+}
+
+impl Render for AppBarWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for AppBarWidget {
+    fn can_inherit(&self) -> bool {
+        false
+    }
+
+    fn render_with_class(&self, _: &str) -> Markup {
+        Padding(Shadow::medium(Background(
+            Gray::_800,
+            Header(
+                Padding(
+                    Flex(
+                        Div()
+                            .vanish()
+                            .add(
+                                Flex(Link(
+                                    "/",
+                                    Div()
+                                        .vanish()
+                                        .add(Sized(
+                                            10,
+                                            10,
+                                            RoundedMedium(Image("/favicon").alt("Logo")),
+                                        ))
+                                        .add(Span(&self.name).semibold().xl().white()),
+                                ))
+                                .items_center()
+                                .space_x(2),
+                            )
+                            .add_some(self.user.as_ref(), |user| Text(&user.username).white()),
+                    )
+                    .group()
+                    .justify(Justify::Between)
+                    .items_center(),
+                )
+                .x(6),
+            ),
+        )))
+        .y(2)
+        .render()
+    }
+}

src/ui/aspect.rs

@@ -0,0 +1,54 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+pub struct Aspect {
+    kind: u8,
+    inner: Box<dyn UIWidget>,
+}
+
+impl Aspect {
+    pub fn auto<T: UIWidget + 'static>(inner: T) -> Self {
+        Self {
+            kind: 0,
+            inner: Box::new(inner),
+        }
+    }
+
+    pub fn square<T: UIWidget + 'static>(inner: T) -> Self {
+        Self {
+            kind: 1,
+            inner: Box::new(inner),
+        }
+    }
+
+    pub fn video<T: UIWidget + 'static>(inner: T) -> Self {
+        Self {
+            kind: 2,
+            inner: Box::new(inner),
+        }
+    }
+}
+
+impl Render for Aspect {
+    fn render(&self) -> Markup {
+        let class = match self.kind {
+            0 => "aspect-auto",
+            1 => "aspect-square",
+            2 => "aspect-video",
+            _ => "",
+        };
+
+        if self.inner.as_ref().can_inherit() {
+            html! {
+                (self.inner.as_ref().render_with_class(class))
+            }
+        } else {
+            html! {
+                div class=(class) {
+                    (self.inner.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/background.rs

@@ -0,0 +1,66 @@
+use super::UIWidget;
+use maud::{Markup, Render, html};
+
+pub trait UIColor {
+    fn color_class(&self) -> &str;
+}
+
+pub enum Blue {
+    _500,
+}
+
+impl UIColor for Blue {
+    fn color_class(&self) -> &str {
+        match self {
+            Blue::_500 => "blue-500",
+        }
+    }
+}
+
+pub enum Gray {
+    _800,
+}
+
+impl UIColor for Gray {
+    fn color_class(&self) -> &str {
+        match self {
+            Gray::_800 => "gray-800",
+        }
+    }
+}
+
+#[allow(non_snake_case)]
+pub fn Background<T: UIWidget + 'static, C: UIColor + 'static>(
+    color: C,
+    inner: T,
+) -> BackgroundWidget {
+    BackgroundWidget(Box::new(inner), Box::new(color))
+}
+
+pub struct BackgroundWidget(Box<dyn UIWidget>, Box<dyn UIColor>);
+
+impl Render for BackgroundWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for BackgroundWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("bg-{} {class}", self.1.color_class()))
+        } else {
+            html! {
+                div class=(format!("bg-{} {class}", self.1.color_class())) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/container.rs

@@ -0,0 +1,37 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+#[allow(non_snake_case)]
+/// A component for fixing an element's width to the current breakpoint.
+pub fn Container<T: UIWidget + 'static>(inner: T) -> ContainerWidget {
+    ContainerWidget(Box::new(inner))
+}
+
+pub struct ContainerWidget(Box<dyn UIWidget>);
+
+impl Render for ContainerWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for ContainerWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("container {class}"))
+        } else {
+            html! {
+                div class=(format!("container {class}")) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/div.rs

@@ -0,0 +1,63 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+#[allow(non_snake_case)]
+pub fn Div() -> DivWidget {
+    DivWidget(Vec::new(), false)
+}
+
+pub struct DivWidget(Vec<Box<dyn UIWidget>>, bool);
+
+impl DivWidget {
+    pub fn add<T: UIWidget + 'static>(mut self, element: T) -> Self {
+        self.0.push(Box::new(element));
+        self
+    }
+
+    pub fn add_some<T: UIWidget + 'static, X, U: Fn(&X) -> T>(
+        mut self,
+        option: Option<&X>,
+        then: U,
+    ) -> Self {
+        if let Some(val) = option {
+            self.0.push(Box::new(then(val)));
+        }
+        self
+    }
+
+    pub fn vanish(mut self) -> Self {
+        self.1 = true;
+        self
+    }
+}
+
+impl Render for DivWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for DivWidget {
+    fn can_inherit(&self) -> bool {
+        false
+    }
+
+    fn render_with_class(&self, _: &str) -> Markup {
+        if self.1 {
+            html! {
+                @for e in &self.0 {
+                    (e.as_ref())
+                }
+            }
+        } else {
+            html! {
+                div {
+                    @for e in &self.0 {
+                        (e.as_ref())
+                    }
+                }
+            }
+        }
+    }
+}

src/ui/flex.rs

@@ -0,0 +1,78 @@
+use super::UIWidget;
+use maud::{Markup, Render, html};
+
+#[allow(non_snake_case)]
+pub fn Flex<T: UIWidget + 'static>(inner: T) -> FlexWidget {
+    FlexWidget(Box::new(inner), vec![], false)
+}
+
+pub enum Justify {
+    Center,
+    Between,
+}
+
+pub struct FlexWidget(Box<dyn UIWidget>, Vec<String>, bool);
+
+impl Render for FlexWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl FlexWidget {
+    pub fn full_center(mut self) -> Self {
+        self.1.push("items-center".to_owned());
+        self.1.push("justify-center".to_owned());
+        self
+    }
+
+    pub fn group(mut self) -> Self {
+        self.2 = true;
+        self
+    }
+
+    pub fn justify(mut self, value: Justify) -> Self {
+        let class = match value {
+            Justify::Center => "justify-center".to_owned(),
+            Justify::Between => "justify-between".to_owned(),
+        };
+
+        self.1.push(class);
+        self
+    }
+
+    pub fn space_x(mut self, x: u32) -> Self {
+        self.1.push(format!("space-x-{x}"));
+        self
+    }
+
+    pub fn items_center(mut self) -> Self {
+        self.1.push("items-center".to_owned());
+        self
+    }
+
+    pub fn gap(mut self, amount: u32) -> Self {
+        self.1.push(format!("gap-{amount}"));
+        self
+    }
+}
+
+impl UIWidget for FlexWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() && !self.2 {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("flex {} {class}", self.1.join(" ")))
+        } else {
+            html! {
+                div class=(format!("flex {} {class}", self.1.join(" "))) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/header.rs

@@ -0,0 +1,30 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+#[allow(non_snake_case)]
+pub fn Header<T: UIWidget + 'static>(inner: T) -> HeaderWidget {
+    HeaderWidget(Box::new(inner))
+}
+
+pub struct HeaderWidget(Box<dyn UIWidget>);
+
+impl Render for HeaderWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for HeaderWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        html! {
+            header class=(class) {
+                (self.0.as_ref())
+            }
+        }
+    }
+}

src/ui/image.rs

@@ -0,0 +1,40 @@
+use super::UIWidget;
+use maud::{Markup, Render, html};
+
+#[allow(non_snake_case)]
+pub fn Image(src: &str) -> ImageWidget {
+    ImageWidget {
+        src: src.to_owned(),
+        alt: String::new(),
+    }
+}
+
+pub struct ImageWidget {
+    src: String,
+    alt: String,
+}
+
+impl Render for ImageWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl ImageWidget {
+    pub fn alt(mut self, alt: &str) -> Self {
+        self.alt = alt.to_owned();
+        self
+    }
+}
+
+impl UIWidget for ImageWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        html! {
+            img src=(self.src) alt=(self.alt) class=(class) {};
+        }
+    }
+}

src/ui/link.rs

@@ -0,0 +1,31 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+#[allow(non_snake_case)]
+/// A component for fixing an element's width to the current breakpoint.
+pub fn Link<T: UIWidget + 'static>(reference: &str, inner: T) -> LinkWidget {
+    LinkWidget(Box::new(inner), reference.to_owned())
+}
+
+pub struct LinkWidget(Box<dyn UIWidget>, String);
+
+impl Render for LinkWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for LinkWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        html! {
+            a class=(class) href=(self.1) {
+                (self.0.as_ref())
+            }
+        }
+    }
+}

src/ui/mod.rs

@@ -0,0 +1,246 @@
+use maud::{Markup, PreEscaped, Render, html};
+
+pub mod appbar;
+pub mod aspect;
+pub mod background;
+pub mod container;
+pub mod div;
+pub mod flex;
+pub mod header;
+pub mod image;
+pub mod link;
+pub mod padding;
+pub mod rounded;
+pub mod search;
+pub mod shadow;
+pub mod sized;
+pub mod text;
+pub mod width;
+
+// UI
+
+// Preludes
+
+// Basic Primitives
+pub mod basic {
+    pub use super::aspect::Aspect;
+    pub use super::background::Background;
+    pub use super::background::{Blue, Gray};
+    pub use super::container::Container;
+    pub use super::div::Div;
+    pub use super::flex::Flex;
+    pub use super::flex::Justify;
+    pub use super::header::Header;
+    pub use super::image::Image;
+    pub use super::link::Link;
+    pub use super::padding::Padding;
+    pub use super::rounded::Rounded;
+    pub use super::rounded::RoundedMedium;
+    pub use super::shadow::Shadow;
+    pub use super::sized::Sized;
+    pub use super::text::{Paragraph, Span, Text};
+    pub use super::width::FitWidth;
+}
+
+// Stacked Components
+pub mod extended {
+    pub use super::appbar::AppBar;
+}
+
+use crate::request::{RequestContext, StringResponse};
+
+use rocket::http::{ContentType, Status};
+
+#[allow(non_snake_case)]
+pub fn Nothing() -> PreEscaped<String> {
+    html! {}
+}
+
+/// Represents the HTML structure of a page shell, including the head, body class, and body content.
+///
+/// This structure is used to construct the overall HTML structure of a page, making it easier to generate consistent HTML pages dynamically.
+pub struct Shell {
+    /// The HTML content for the `<head>` section of the page.
+    head: PreEscaped<String>,
+    /// An optional class attribute for the `<body>` element.
+    body_class: Option<String>,
+    /// The HTML content for the static body portion.
+    body_content: PreEscaped<String>,
+}
+
+impl Shell {
+    /// Constructs a new `Shell` instance with the given head content, body content, and body class.
+    ///
+    /// # Arguments
+    /// * `head` - The HTML content for the page's head.
+    /// * `body_content` - The HTML content for the body of the page.
+    /// * `body_class` - An optional class to apply to the `<body>` element.
+    ///
+    /// # Returns
+    /// A `Shell` instance encapsulating the provided HTML content and attributes.
+    #[must_use]
+    pub const fn new(
+        head: PreEscaped<String>,
+        body_content: PreEscaped<String>,
+        body_class: Option<String>,
+    ) -> Self {
+        Self {
+            head,
+            body_class,
+            body_content,
+        }
+    }
+
+    /// Renders the full HTML page using the shell structure, with additional content and a title.
+    ///
+    /// # Arguments
+    /// * `content` - The additional HTML content to render inside the main content div.
+    /// * `title` - The title of the page, rendered inside the `<title>` element.
+    ///
+    /// # Returns
+    /// A `PreEscaped<String>` containing the full HTML page content.
+    #[must_use]
+    pub fn render(&self, content: PreEscaped<String>, title: &str) -> PreEscaped<String> {
+        html! {
+                html {
+                    head {
+                        title { (title) };
+                        (self.head)
+                    };
+                    @if self.body_class.is_some() {
+                    body class=(self.body_class.as_ref().unwrap()) {
+                        (self.body_content);
+
+                        div id="main_content" {
+                            (content)
+                        };
+                    };
+                } @else {
+                    body {
+                        (self.body_content);
+
+                        div id="main_content" {
+                            (content)
+                        };
+                    };
+                }
+            }
+        }
+    }
+}
+
+/// Renders a full page or an HTMX-compatible fragment based on the request context.
+///
+/// If the request is not an HTMX request, this function uses the provided shell to generate
+/// a full HTML page. If it is an HTMX request, only the provided content is rendered.
+///
+/// # Arguments
+/// * `content` - The HTML content to render.
+/// * `title` - The title of the page for full-page rendering.
+/// * `ctx` - The `RequestContext` containing request metadata.
+/// * `shell` - The `Shell` instance used for full-page rendering.
+///
+/// # Returns
+/// A `StringResponse`
+pub async fn render_page(
+    content: PreEscaped<String>,
+    title: &str,
+    ctx: RequestContext,
+    shell: &Shell,
+) -> StringResponse {
+    if ctx.is_htmx {
+        (Status::Ok, (ContentType::HTML, content.into_string()))
+    } else {
+        (
+            Status::Ok,
+            (
+                ContentType::HTML,
+                shell.render(content, title).into_string(),
+            ),
+        )
+    }
+}
+
+/// Generates an HTML link with HTMX attributes for dynamic behavior.
+///
+/// This function creates an `<a>` element with attributes that enable HTMX behavior for navigation without reload.
+///
+/// # Arguments
+/// * `url` - The URL to link to.
+/// * `class` - The CSS class for styling the link.
+/// * `onclick` - The JavaScript `onclick` handler for the link.
+/// * `content` - The content inside the link element.
+///
+/// # Returns
+/// A `PreEscaped<String>` containing the rendered HTML link element.
+#[must_use]
+pub fn htmx_link(
+    url: &str,
+    class: &str,
+    onclick: &str,
+    content: PreEscaped<String>,
+) -> PreEscaped<String> {
+    html!(
+        a class=(class) onclick=(onclick) href=(url) hx-get=(url) hx-target="#main_content" hx-push-url="true" hx-swap="innerHTML" {
+            (content);
+        };
+    )
+}
+
+/// Generates a `<script>` element containing the provided JavaScript code.
+///
+/// This function wraps the provided JavaScript code in a `<script>` tag,
+/// allowing for easy inclusion of custom scripts in the rendered HTML.
+///
+/// # Arguments
+/// * `script` - The JavaScript code to include.
+///
+/// # Returns
+/// A `PreEscaped<String>` containing the rendered `<script>` element.
+#[must_use]
+pub fn script(script: &str) -> PreEscaped<String> {
+    html!(
+        script {
+            (PreEscaped(script))
+        };
+    )
+}
+
+pub struct Row(PreEscaped<String>);
+
+impl Render for Row {
+    fn render(&self) -> maud::Markup {
+        html! {
+            div class="flex" { (self.0) }
+        }
+    }
+}
+
+// Grids
+
+// ListViews
+
+// ListTiles
+
+// Cards
+
+pub trait UIWidget: Render {
+    fn can_inherit(&self) -> bool;
+    fn render_with_class(&self, class: &str) -> Markup;
+}
+
+impl UIWidget for PreEscaped<String> {
+    fn can_inherit(&self) -> bool {
+        false
+    }
+
+    fn render_with_class(&self, _: &str) -> Markup {
+        self.render()
+    }
+}
+
+// TODO :
+// hover focus
+// responsive media
+// more elements
+// htmx builder trait?

src/ui/padding.rs

@@ -0,0 +1,83 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+pub struct PaddingInfo {
+    pub right: Option<u32>,
+}
+
+#[allow(non_snake_case)]
+pub fn Padding<T: UIWidget + 'static>(inner: T) -> PaddingWidget {
+    PaddingWidget {
+        inner: Box::new(inner),
+        right: None,
+        y: None,
+        x: None,
+    }
+}
+
+pub struct PaddingWidget {
+    pub inner: Box<dyn UIWidget>,
+    pub right: Option<u32>,
+    pub y: Option<u32>,
+    pub x: Option<u32>,
+}
+
+impl PaddingWidget {
+    pub fn right(mut self, right: u32) -> Self {
+        self.right = Some(right);
+        self
+    }
+
+    pub fn y(mut self, y: u32) -> Self {
+        self.y = Some(y);
+        self
+    }
+
+    pub fn x(mut self, x: u32) -> Self {
+        self.x = Some(x);
+        self
+    }
+}
+
+impl Render for PaddingWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for PaddingWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        let mut our_class = Vec::new();
+
+        if let Some(r) = self.right {
+            our_class.push(format!("pr-{r}"));
+        }
+
+        if let Some(y) = self.y {
+            our_class.push(format!("py-{y}"));
+        }
+
+        if let Some(x) = self.x {
+            our_class.push(format!("px-{x}"));
+        }
+
+        let our_class = our_class.join(" ");
+
+        if self.inner.as_ref().can_inherit() {
+            self.inner
+                .as_ref()
+                .render_with_class(&format!("{our_class} {class}"))
+        } else {
+            html! {
+                div class=(format!("{our_class} {class}")) {
+                    (self.inner.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/rounded.rs

@@ -0,0 +1,41 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+#[allow(non_snake_case)]
+pub fn Rounded<T: UIWidget + 'static>(inner: T) -> RoundedWidget {
+    RoundedWidget(Box::new(inner), "full".to_owned())
+}
+
+#[allow(non_snake_case)]
+pub fn RoundedMedium<T: UIWidget + 'static>(inner: T) -> RoundedWidget {
+    RoundedWidget(Box::new(inner), "md".to_owned())
+}
+
+pub struct RoundedWidget(Box<dyn UIWidget>, String);
+
+impl Render for RoundedWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for RoundedWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("rounded-{} {class}", self.1))
+        } else {
+            html! {
+                div class=(format!("rounded-{} {class}", self.1)) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/search.rs

@@ -0,0 +1,160 @@
+use maud::{PreEscaped, html};
+
+use crate::request::{RequestContext, api::Pager};
+
+/// Represents a search form with configurable options such as heading, placeholder, and CSS class.
+pub struct Search {
+    post_url: String,
+    heading: Option<PreEscaped<String>>,
+    placeholder: Option<String>,
+    search_class: Option<String>,
+}
+
+impl Search {
+    /// Creates a new `Search` instance with the specified post URL.
+    ///
+    /// # Arguments
+    /// * `post_url` - The URL where the search form will send the POST request.
+    ///
+    /// # Returns
+    /// A new `Search` instance with default settings.
+    #[must_use]
+    pub const fn new(post_url: String) -> Self {
+        Self {
+            heading: None,
+            placeholder: None,
+            post_url,
+            search_class: None,
+        }
+    }
+
+    /// Sets the placeholder text for the search input field.
+    ///
+    /// # Arguments
+    /// * `placeholder` - The placeholder text to display in the search input.
+    ///
+    /// # Returns
+    /// The updated `Search` instance.
+    #[must_use]
+    pub fn placeholder(mut self, placeholder: String) -> Self {
+        self.placeholder = Some(placeholder);
+        self
+    }
+
+    /// Sets the heading to be displayed above the search form.
+    ///
+    /// # Arguments
+    /// * `heading` - The heading element to display.
+    ///
+    /// # Returns
+    /// The updated `Search` instance.
+    #[must_use]
+    pub fn heading(mut self, heading: PreEscaped<String>) -> Self {
+        self.heading = Some(heading);
+        self
+    }
+
+    /// Sets the CSS class for the search input field.
+    ///
+    /// # Arguments
+    /// * `class` - The CSS class to apply to the search input.
+    ///
+    /// # Returns
+    /// The updated `Search` instance.
+    #[must_use]
+    pub fn search_class(mut self, class: String) -> Self {
+        self.search_class = Some(class);
+        self
+    }
+
+    /// Builds the HTML for search results based on the current page and query.
+    ///
+    /// # Arguments
+    /// * `pager` - The `Pager` instance to paginate results.
+    /// * `page` - The current page number.
+    /// * `query` - The search query string.
+    /// * `result_ui` - A function that transforms each result into HTML.
+    ///
+    /// # Returns
+    /// The HTML string containing the search results.
+    pub fn build_results<T>(
+        &self,
+        pager: Pager<T>,
+        page: i64,
+        query: &str,
+        result_ui: impl Fn(&T) -> PreEscaped<String>,
+    ) -> PreEscaped<String> {
+        let results = pager.page(page as u64);
+        let reslen = results.len();
+
+        html! {
+
+            @for res in results {
+                (result_ui(res))
+            }
+
+            @if reslen as u64 == pager.items_per_page {
+                div hx-get=(format!("{}?query={}&page={}", self.post_url, query, page+1))
+                hx-trigger="revealed"
+                hx-swap="outerHTML" {};
+            };
+        }
+    }
+
+    /// Builds the full response based on the context (HTMX or full HTML response).
+    ///
+    /// # Arguments
+    /// * `ctx` - The request context, used to determine if HTMX is enabled.
+    /// * `results` - The `Pager` instance containing the search results.
+    /// * `page` - The current page number.
+    /// * `query` - The search query string.
+    /// * `result_ui` - A function that transforms each result into HTML.
+    ///
+    /// # Returns
+    /// The HTML string containing either the HTMX response or full page content.
+    pub fn build_response<T>(
+        &self,
+        ctx: &RequestContext,
+        results: Pager<T>,
+        page: i64,
+        query: &str,
+        result_ui: impl Fn(&T) -> PreEscaped<String>,
+    ) -> PreEscaped<String> {
+        if ctx.is_htmx {
+            // Return HTMX Search elements
+            self.build_results(results, page, query, result_ui)
+        } else {
+            // Return full rendered site
+            let first_page = self.build_results(results, page, query, result_ui);
+            self.build(query, first_page)
+        }
+    }
+
+    /// Builds the full search form and first search page results.
+    ///
+    /// # Arguments
+    /// * `query` - The search query string.
+    /// * `first_page` - The HTML string containing the first page of search results.
+    ///
+    /// # Returns
+    /// The HTML string containing the entire search form and results UI.
+    #[must_use]
+    pub fn build(&self, query: &str, first_page: PreEscaped<String>) -> PreEscaped<String> {
+        let no_html = PreEscaped(String::new());
+        html! {
+            (self.heading.as_ref().unwrap_or_else(|| &no_html))
+            input type="search" name="query"
+            value=(query)
+            placeholder=(self.placeholder.as_ref().unwrap_or(&"Search...".to_string())) hx-get=(self.post_url)
+            hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
+            hx-target="#search_results" hx-push-url="true"
+            class=(self.search_class.as_deref().unwrap_or_default()) {};
+
+            div id="search_results" {
+                @if !query.is_empty() {
+                    (first_page)
+                }
+            };
+        }
+    }
+}

src/ui/shadow.rs

@@ -0,0 +1,37 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+pub struct Shadow(Box<dyn UIWidget>, String);
+
+impl Shadow {
+    pub fn medium<T: UIWidget + 'static>(inner: T) -> Shadow {
+        Shadow(Box::new(inner), "md".to_owned())
+    }
+}
+
+impl Render for Shadow {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for Shadow {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("shadow-{} {class}", self.1))
+        } else {
+            html! {
+                div class=(format!("shadow-{} {class}", self.1)) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/sized.rs

@@ -0,0 +1,35 @@
+use super::UIWidget;
+use maud::{Markup, Render, html};
+
+#[allow(non_snake_case)]
+pub fn Sized<T: UIWidget + 'static>(height: u32, width: u32, inner: T) -> SizedWidget {
+    SizedWidget(Box::new(inner), height, width)
+}
+
+pub struct SizedWidget(Box<dyn UIWidget>, u32, u32);
+
+impl Render for SizedWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for SizedWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("h-{} w-{} {class}", self.1, self.2))
+        } else {
+            html! {
+                div class=(format!("h-{} w-{} {class}", self.1, self.2)) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/text.rs

@@ -0,0 +1,131 @@
+use super::UIWidget;
+use maud::{Markup, Render, html};
+
+#[allow(non_snake_case)]
+pub fn Text(txt: &str) -> TextWidget {
+    TextWidget {
+        inner: None,
+        txt: txt.to_string(),
+        font: String::new(),
+        color: String::new(),
+        size: String::new(),
+        span: false,
+    }
+}
+
+#[allow(non_snake_case)]
+pub fn Paragraph<T: UIWidget + 'static>(inner: T) -> TextWidget {
+    TextWidget {
+        inner: Some(Box::new(inner)),
+        font: String::new(),
+        color: String::new(),
+        txt: String::new(),
+        size: String::new(),
+        span: false,
+    }
+}
+
+#[allow(non_snake_case)]
+pub fn Span(txt: &str) -> TextWidget {
+    TextWidget {
+        inner: None,
+        txt: txt.to_string(),
+        font: String::new(),
+        color: String::new(),
+        size: String::new(),
+        span: true,
+    }
+}
+
+pub struct TextWidget {
+    inner: Option<Box<dyn UIWidget>>,
+    txt: String,
+    font: String,
+    color: String,
+    size: String,
+    span: bool,
+}
+
+impl TextWidget {
+    pub fn semibold(mut self) -> Self {
+        self.font = "font-semibold".to_owned();
+        self
+    }
+
+    pub fn bold(mut self) -> Self {
+        self.font = "font-bold".to_owned();
+        self
+    }
+
+    pub fn medium(mut self) -> Self {
+        self.font = "font-medium".to_owned();
+        self
+    }
+
+    pub fn _2xl(mut self) -> Self {
+        self.size = "text-2xl".to_owned();
+        self
+    }
+
+    pub fn xl(mut self) -> Self {
+        self.size = "text-xl".to_owned();
+        self
+    }
+
+    pub fn sm(mut self) -> Self {
+        self.size = "text-sm".to_owned();
+        self
+    }
+
+    pub fn gray(mut self, i: u32) -> Self {
+        self.color = format!("text-gray-{}", i);
+        self
+    }
+
+    pub fn slate(mut self, i: u32) -> Self {
+        self.color = format!("text-slate-{}", i);
+        self
+    }
+
+    pub fn white(mut self) -> Self {
+        self.color = "text-white".to_owned();
+        self
+    }
+}
+
+impl Render for TextWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for TextWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        let our_class = format!("{} {} {}", self.color, self.font, self.size);
+        if let Some(inner) = &self.inner {
+            if self.span {
+                html! {
+                    span class=(format!("{} {}", class, our_class)) { (inner) }
+                }
+            } else {
+                html! {
+                    p class=(format!("{} {}", class, our_class)) { (inner) }
+                }
+            }
+        } else {
+            if self.span {
+                html! {
+                    span class=(format!("{} {}", class, our_class)) { (self.txt) }
+                }
+            } else {
+                html! {
+                    p class=(format!("{} {}", class, our_class)) { (self.txt) }
+                }
+            }
+        }
+    }
+}

src/ui/width.rs

@@ -0,0 +1,36 @@
+use maud::{Markup, Render, html};
+
+use super::UIWidget;
+
+#[allow(non_snake_case)]
+pub fn FitWidth<T: UIWidget + 'static>(inner: T) -> FitWidthWidget {
+    FitWidthWidget(Box::new(inner))
+}
+
+pub struct FitWidthWidget(Box<dyn UIWidget>);
+
+impl Render for FitWidthWidget {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for FitWidthWidget {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("max-w-fit {class}"))
+        } else {
+            html! {
+                div class=(format!("max-w-fit {class}")) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}