How can I access the active tab in a Shiny Quarto dashboard?

I am building a Quarto dashboard with Shiny and would like to display the name or ID of the currently active tab inside the dashboard.

Here's a minimal working example of my code:

---
title: "Tab-Aware Dashboard"
format: 
  dashboard:
  sidebar: 
  id: active_tab   # hoping to expose current tab via input$active_tab
server: shiny
---
  
  # Sidebar {.sidebar}
  
  ```{r}
selectInput("name", "Choose a name", choices = c("Alice", "Bob", "Charlie"))
```

# Main Tab {#main}

### Greeting

```{r}
textOutput("greeting")
```

### Show Active Tab

```{r}
textOutput("current_tab")
```

# Second Tab {#second}

```{r}
plot(cars)
```

```{r}
#| context: server

output$greeting <- renderText({
  paste("Hello,", input$name, "!")
})

output$current_tab <- renderText({
  paste("You are on tab:", input$active_tab)
})
```

However, input$active_tab seems to be NULL or doesn't work at all. No output is shown in current_tab.

I want to access or print the current tab name or ID somewhere in the UI, when switching between tabs (e.g. Main Tab, Second Tab). How can I access the currently selected tab in a Quarto dashboard?

I think that this is currently not possible without custom JS. In this answer it is explained how to set it up for a tabset panel in Quarto using shiny.setInputValue(). We can slightly modify it and then it also works for general tabs within a dashboard:

---
title: "Tab-Aware Dashboard"
format: dashboard
server: shiny
---

# Sidebar {.sidebar}
  
```{r}
selectInput("name", "Choose a name", choices = c("Alice", "Bob", "Charlie"))
```

# Main Tab {#main}

### Greeting

```{r}
textOutput("greeting")
```

### Show Active Tab

```{r}
textOutput("current_tab")
```

# Second Tab {#second}

```{r}
plot(cars)
```

```{r}
#| context: server

output$greeting <- renderText({
  paste("Hello,", input$name, "!")
})

output$current_tab <- renderText({
  paste("You are on tab:", input$active_tab)
})
```

```{js}
$(document).on("shiny:connected", function() {
  // initially, the first tab is chosen, set this
  var target = $('.nav-item').find("a").first().text();
  Shiny.setInputValue("active_tab", target);
  
  // add an event handler which updates this value when a change occurs
  $('.nav-item').on('shown.bs.tab', function (e) { 
    var target = $(e.target).text(); 
    Shiny.setInputValue("active_tab", target);
  });
});
```