Add Introducing Toolbars blog post

content/blog/introducing-toolbars/app_1.R

@@ -0,0 +1,48 @@
+library(shiny)
+library(bslib)
+
+ui <- page_fluid(
+  h2("Example App"),
+  layout_columns(
+    card(
+      card_header(
+        "Toolbar in header & label"
+      ),
+      card_body(
+        p("Placeholder text.")
+      )
+    ),
+    card(
+      card_header(
+        "Toolbar in header, footer, label"
+      ),
+      card_body(
+        p("More placeholder text.")
+      ),
+      card_footer(
+        p("Footer content here.")
+      )
+    ),
+    col_widths = c(6, 6)
+  ),
+  card(
+    card_header(
+      "Toolbar in Text Input Submit Area: Message Composer"
+    ),
+    card_body(
+      layout_columns(
+        p("Placeholder for an input"),
+        div(
+          p("Placeholder for outputs")
+        ),
+        col_widths = c(6, 6)
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  # Placeholder
+}
+
+shinyApp(ui, server)

content/blog/introducing-toolbars/app_1.py

@@ -0,0 +1,42 @@
+from faicons import icon_svg
+
+from shiny import App, Inputs, Outputs, Session, reactive, render, ui
+
+app_ui = ui.page_fluid(
+    ui.h2("Example App"),
+    ui.layout_columns(
+        ui.card(
+            ui.card_header(
+                "Toolbar in header & label",
+            ),
+            ui.card_body(ui.p("Placeholder text.")),
+        ),
+        ui.card(
+            ui.card_header(
+                "Toolbar in header, footer, label",
+            ),
+            ui.card_body(ui.p("More placeholder text.")),
+            ui.card_footer(ui.p("Footer content here.")),
+        ),
+        col_widths=[6, 6],
+    ),
+    ui.card(
+        ui.card_header(
+            "Toolbar in Text Input Submit Area: Message Composer",
+        ),
+        ui.card_body(
+            ui.layout_columns(
+                ui.p("Placeholder for an input"),
+                ui.div(ui.p("Placeholder for outputs")),
+                col_widths=[6, 6],
+            ),
+        ),
+    ),
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session) -> None:
+    pass
+
+
+app = App(app_ui, server)

content/blog/introducing-toolbars/app_2.R

@@ -0,0 +1,101 @@
+library(shiny)
+library(bslib)
+
+ui <- page_fluid(
+  h2("Example App"),
+  layout_columns(
+    card(
+      card_header(
+        "Sales Data",
+        toolbar(
+          align = "right",
+          toolbar_input_select(
+            id = "region_filter",
+            label = "Region",
+            choices = c("All", "North", "South", "East", "West"),
+            icon = icon("filter")
+          ),
+          toolbar_divider(),
+          toolbar_input_button(
+            id = "save_btn",
+            label = "Save",
+            icon = icon("floppy-disk")
+          )
+        )
+      ),
+      card_body(
+        tableOutput("sales_table")
+      )
+    ),
+    card(
+      card_header(
+        "Toolbar in header, footer, label"
+      ),
+      card_body(
+        p("More placeholder text.")
+      ),
+      card_footer(
+        p("Footer content here.")
+      )
+    ),
+    col_widths = c(6, 6)
+  ),
+  card(
+    card_header(
+      "Toolbar in Text Input Submit Area: Message Composer"
+    ),
+    card_body(
+      layout_columns(
+        p("Placeholder for an input"),
+        div(
+          p("Placeholder for outputs")
+        ),
+        col_widths = c(6, 6)
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  # Handle save button click
+  observeEvent(input$save_btn, {
+    # Change icon to checkmark and show notification
+    update_toolbar_input_button(
+      "save_btn",
+      icon = icon("check"),
+      label = "Saved",
+      session = session
+    )
+    showNotification("Saving", type = "message")
+  })
+
+  # Sample sales data
+  sales_data <- reactive({
+    data.frame(
+      Product = c("Widget A", "Widget B", "Widget C", "Widget D"),
+      Region = c("North", "South", "East", "West"),
+      Sales = c(1200, 850, 1450, 920),
+      stringsAsFactors = FALSE
+    )
+  })
+
+  # Filtered sales data based on region filter
+  filtered_data <- reactive({
+    data <- sales_data()
+
+    if (input$region_filter != "All") {
+      data <- data[data$Region == input$region_filter, ]
+    }
+
+    data
+  })
+
+  # Render the table
+  output$sales_table <- renderTable({
+    data <- filtered_data()
+    data$Sales <- paste0("$", format(data$Sales, big.mark = ",", trim = TRUE))
+    data
+  })
+}
+
+shinyApp(ui, server)

content/blog/introducing-toolbars/app_2.py

@@ -0,0 +1,106 @@
+import pandas as pd
+from faicons import icon_svg
+
+from shiny import App, Inputs, Outputs, Session, reactive, render, ui
+
+app_ui = ui.page_fluid(
+    ui.h2("Example App"),
+    ui.layout_columns(
+        ui.card(
+            ui.card_header(
+                "Sales Data",
+                ui.toolbar(
+                    ui.toolbar_input_select(
+                        id="region_filter",
+                        label="Region",
+                        choices=["All", "North", "South", "East", "West"],
+                        icon=icon_svg("filter"),
+                    ),
+                    ui.toolbar_divider(),
+                    ui.toolbar_input_button(
+                        id="save_btn",
+                        label="Save",
+                        icon=icon_svg("floppy-disk"),
+                    ),
+                    align="right",
+                ),
+            ),
+            ui.card_body(ui.output_table("sales_table")),
+        ),
+        ui.card(
+            ui.card_header(
+                "Toolbar in header, footer, label",
+            ),
+            ui.card_body(ui.p("More placeholder text.")),
+            ui.card_footer(ui.p("Footer content here.")),
+        ),
+        col_widths=[6, 6],
+    ),
+    ui.card(
+        ui.card_header(
+            "Toolbar in Text Input Submit Area: Message Composer",
+        ),
+        ui.card_body(
+            ui.layout_columns(
+                ui.p("Placeholder for an input"),
+                ui.div(ui.p("Placeholder for outputs")),
+                col_widths=[6, 6],
+            ),
+        ),
+    ),
+)
+
+
+def server(input: Inputs, output: Outputs, session: Session) -> None:
+    @reactive.effect
+    @reactive.event(input.save_btn)
+    def update():
+        ui.update_toolbar_input_button(
+            "save_btn",
+            icon=icon_svg("check"),
+            label="Saved",
+        )
+        ui.notification_show("Saving", type="message")
+
+    # Sample sales data
+    @reactive.calc
+    def sales_data():
+        return pd.DataFrame(
+            {
+                "Product": ["Widget A", "Widget B", "Widget C", "Widget D"],
+                "Region": ["North", "South", "East", "West"],
+                "Sales": [1200, 850, 1450, 920],
+            }
+        )
+
+    # Filtered sales data based on region filter
+    @reactive.calc
+    def filtered_data():
+        data = sales_data()
+
+        if input.region_filter() != "All":
+            data = data[data["Region"] == input.region_filter()]
+
+        return data
+
+    # Render the table
+    @render.table
+    def sales_table():
+        return (
+            filtered_data()
+            .style.hide(axis="index")
+            .format({"Sales": "${:,.0f}"})
+            .set_table_styles([
+                {"selector": "th", "props": [
+                    ("border-bottom", "1px solid black"),
+                    ("padding", "8px 6px"),
+                    ("text-align", "left"),
+                ]},
+                {"selector": "td", "props": [
+                    ("padding", "6px"),
+                ]},
+            ])
+        )
+
+
+app = App(app_ui, server)