Final UI/UX changes (#1571)

Part of fixes that will close
insightsengineering/teal.gallery#216 and
insightsengineering/teal.gallery#217

Please review this along with its companion PRs:

- [ ] insightsengineering/teal.widgets#310
- [ ] insightsengineering/teal.reporter#366
- [ ]
insightsengineering/teal.modules.general#905
- [ ]
insightsengineering/teal.modules.clinical#1405

Changes:
1. Improved the header/footer and breadcrum spacing
<img width="1714" height="843" alt="Screenshot 2025-07-30 192020"
src="https://github.com/user-attachments/assets/de31cfbc-f755-48d0-9b33-6e2f65555036"
/>

2. The popup buttons: `🔖Bookmark`, `📷Snapshot Manager`, `▼ Filter
Manager`, `📅Load Data`
will be disabled when shiny is busy. Note that the `teal.reporter` and
`teal.widgets` modal buttons are handled in different PRs, the solution
is the same, but they are name-spaced so they don't clash each other.

<details>

<summary>
Example app for testing
</summary>

```
devtools::load_all("../teal.widgets")
devtools::load_all("../teal.reporter")
devtools::load_all("../teal")
devtools::load_all("../teal.modules.general")

make_data <- function(datanames = c("ADSL", "ADTTE")) {
  data_obj <- teal.data::teal_data()
  if ("ADSL" %in% datanames) {
    data_obj <- within(data_obj, ADSL <- teal.data::rADSL)
  }
  if ("ADTTE" %in% datanames) {
    data_obj <- within(data_obj, ADTTE <- teal.data::rADTTE)
  }
  join_keys(data_obj) <- default_cdisc_join_keys[datanames]
  data_obj
}

error_data <- teal_data_module(
  once = FALSE,
  ui = function(id) {
    ns <- NS(id)
    tagList(
      selectizeInput(
        ns("errortype"),
        label = "Error Type",
        choices = c(
          "ok", "insufficient datasets", "no data",
          "qenv.error", "error in reactive", "validate error", "silent.shiny.error", "not a reactive"
        )
      ),
      actionButton(ns("submit"), "Submit")
    )
  },
  server = function(id, ...) {
    moduleServer(id, function(input, output, session) {
      logger::log_trace("example_module_transform2 initializing.")

      eventReactive(input$submit, {
        switch(req(input$errortype),
          ok = make_data(),
          `insufficient datasets` = make_data(datanames = "ADSL"),
          `no data` = teal_data(),
          qenv.error = within(teal_data(), stop("this is qenv.error in teal_data_module (from inside within())")),
          `error in reactive` = stop("error in a reactive in teal_data_module (manual stop call)"),
          `validate error` = validate(need(FALSE, "validate error in teal_data_module (with newline )")),
          `silent.shiny.error` = req(FALSE)
        )
      })
    })
  }
)

modules <- modules(
  module(
    "test wait",
    server = function(id, data) {
      moduleServer(id, function(input, output, session) {
        observeEvent(input$wait, {
          Sys.sleep(2)
        })
      })
    },
    ui = function(id) {
      ns <- NS(id)
      actionButton(ns("wait"), "Wait for 2 seconds `Sys.sleep(2)`")
    }
  ),
  example_module("One"),
  teal.modules.general::tm_g_distribution(
    "Distribution",
    dist_var = teal.transform::data_extract_spec(
      dataname = "iris",
      select = teal.transform::select_spec(teal.transform::variable_choices("iris"), "Petal.Length")
    )
  ),
  example_module("One"),
  example_module("Two"),
  example_module("Two"),
  teal.modules.general::tm_variable_browser("Variable Browser"),
  teal.modules.general::tm_variable_browser("Variable Browser"),
  modules(
    label = "Nest level 1",
    example_module("Two"),
    example_module("Double Nested module"),
    modules(
      label = "Nest level 2",
      example_module("Inception two"),
      modules(
        label = "Nest level 3",
        example_module("Double Inception")
      )
    )
  ),
  modules(
    label = "Nested",
    example_module("Nested one"),
    example_module("Nested two")
  ),
  example_module("Three")
)

app <- init(
  data = error_data,
  modules = modules
) |>
  modify_title(title = "Custom title") |>
  modify_header(
    element = tags$div("Custom header")
  ) |>
  modify_footer(
    element = tags$div(h3("Custom footer"))
  )
shinyApp(app$ui, app$server, enableBookmarking = "server")
```

</details>

Author: vedhav

R/init.R

@@ -219,7 +219,7 @@ init <- function(data,
           ),
           tags$header(
             id = "teal-header",
-            style = "margin: 0.5em",
+            style = "margin: 1em 1em 0 1em;",
             tags$div(id = "teal-header-content")
           ),
           ui_teal(
@@ -228,7 +228,7 @@ init <- function(data,
           ),
           tags$footer(
             id = "teal-footer",
-            style = "margin: 0.5em",
+            style = "margin: 0.5em 1em;",
             tags$div(id = "teal-footer-content"),
             ui_session_info("teal-footer-session_info")
           )

R/module_nested_tabs.R

@@ -586,8 +586,8 @@ srv_teal_module <- function(id,
 }
 
 .modules_breadcrumb <- function(module) {
-  tags$span(
-    style = "color: var(--bs-secondary); font-size: medium;opacity: 0.6; margin-left: 0.5em;",
+  tags$div(
+    style = "color: var(--bs-secondary); font-size: large; opacity: 0.6; margin: 0 0.5em 0.5em 0.5em;",
     paste("Home", module$path, sep = " / ")
   )
 }

R/utils.R

@@ -514,9 +514,17 @@ pluralize <- function(x, singular, plural = NULL) {
 .expand_button <- function(id, label, icon) {
   tags$span(
     class = "teal expand-button",
-    tags$a(
+    htmltools::htmlDependency(
+      name = "teal-busy-disable",
+      version = utils::packageVersion("teal"),
+      package = "teal",
+      src = "js",
+      script = "busy-disable.js"
+    ),
+    shinyjs::useShinyjs(),
+    tags$button(
       id = id,
-      class = "action-button",
+      class = "action-button teal-busy-disable",
       role = "button",
       style = "text-decoration: none;",
       tags$span(class = "icon", bsicons::bs_icon(icon, class = "text-primary")),

inst/css/custom.css

@@ -86,11 +86,21 @@ body > div:has(~ #shiny-modal-wrapper .blur_background) {
   transition: max-width 0.3s ease;
 }
 
-.teal.expand-button a {
+.teal.expand-button button {
+  color: var(--bs-primary);
+  background-color: transparent;
   border: 2px solid transparent;
   padding: 0.5rem;
 }
 
+.teal.expand-button button:disabled {
+  color: var(--bs-dark-text-emphasis);
+}
+
+.teal.expand-button:hover button:disabled {
+  border-bottom: 2px solid var(--bs-dark-bg-subtle);
+}
+
 .teal.expand-button .label {
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -100,7 +110,7 @@ body > div:has(~ #shiny-modal-wrapper .blur_background) {
   max-width: 200px;
 }
 
-.teal.expand-button:hover a {
+.teal.expand-button:hover button {
   border-bottom: 2px solid var(--bs-primary-border-subtle);
 }
 

inst/js/busy-disable.js

@@ -0,0 +1,8 @@
+// Primarily added to make sure the user does not open multiple modals when shiny is busy.
+// https://github.com/rstudio/shiny/issues/4261
+$(document).on("shiny:busy", function () {
+  $(".teal-busy-disable").prop("disabled", true);
+});
+$(document).on("shiny:idle", function () {
+  $(".teal-busy-disable").prop("disabled", false);
+});

inst/module-navigation/module-navigation.css

@@ -61,10 +61,6 @@
   position: relative;
 }
 
-.dropdown.nav-item-custom .teal-reporter.outline-button .badge {
-  margin-left: 1em;
-}
-
 .teal.dropdown-button {
   border: 2px solid transparent;
   margin: 0.25em;