feat(sidebar): Desktop sidebars are now resizable

[gadenbuie]

This PR adds a resize handle into the sidebar element of layout_sidebar() to make all desktop (or wide-screen) sidebars resizable.

This is a Typescript and Sass-only change and does not require any R or Python updates.

Also, the initial implementation was written by Claude Sonnet 4 but I've reviewed all changes and made a few changes for code style and consistency and to improve the accessibility of the component.

https://github.com/user-attachments/assets/2d0c8354-f9c0-4ad2-ad67-dd2805e17bf1

[gadenbuie]

On second thought, non-collapsible desktop sidebars should be resizable, too. That starts to beg the question of adding an option, like resizable, but I think it's complicated enough that we should just have desktop sidebars always be resizable.

[cpsievert]

Nice! I'd like to have one more closer look before merging, but consider this basically approved. Let me know when you're ready to merge, and I'll have one more closer look

[gadenbuie]

Let me know when you're ready to merge, and I'll have one more closer look

I think you can go ahead with that look, the comments so far will be easy to address and don't involve any large changes

[cpsievert]

One subtle issue I noticed in testing -- if you make the window small (to go in mobile mode), then big again (to desktop mode), the resize handle is no longer visible

[gadenbuie]

One subtle issue I noticed in testing -- if you make the window small (to go in mobile mode), then big again (to desktop mode), the resize handle is no longer visible

Are you testing against the latest code in this branch? I'm a little fuzzy on the timeline but I remember seeing this and fixing it too. I can't repro locally anymore, either.

Edit: oh yeah, here: 96ba743aca216e8f84e88988929ba45a85426b58

[cpsievert]

Yea, I can repro on 4ec6428 with this example:

library(bslib)
library(shiny)
library(crosstalk)
library(plotly)
library(leaflet)

# Creates the "filter link" between the controls and plots
dat <- SharedData$new(dplyr::slice_sample(diamonds, n = 1000))

# Sidebar elements (e.g., filter controls)
filters <- list(
  filter_select("cut", "Cut", dat, ~cut),
  filter_select("color", "Color", dat, ~color),
  filter_select("clarity", "Clarity", dat, ~clarity)
)

# plotly visuals
plots <- list(
  plot_ly(dat) |> add_histogram(x = ~price),
  plot_ly(dat) |> add_histogram(x = ~carat),
  plot_ly(dat) |> add_histogram(x = ~cut, color = ~clarity)
)
plots <- lapply(plots, \(x) config(x, displayModeBar = FALSE))

# map filter and visual
quake_dat <- SharedData$new(quakes)
map_filter <- filter_slider("mag", "Magnitude", quake_dat, ~mag)
map_quakes <- leaflet(quake_dat) |>
  addTiles() |>
  addCircleMarkers()

sidebar_diamonds <- layout_sidebar(
  sidebar = filters[[1]],
  plots[[1]]
)

sidebar_quakes <- layout_sidebar(
  sidebar = map_filter,
  map_quakes
)

page_fillable(
  sidebar_diamonds,
  card(
    card_header("Earthquakes"),
    sidebar_quakes
  )
)

[gadenbuie]

@cpsievert thanks for the example. I could get it to repro under certain edge cases. It should be fixed by 083baef (with the built assets from 9ae4470)

[gadenbuie]

CI failures are unrelated to this PR, maybe something about updated package versions? Getting this change in some R flavors

- <script src="lib/jquery/jquery-3.6.0.min.js"></script>            
+ <script src="lib/jquery/jquery.min.js"></script>

[cpsievert]

Great work, excited for this to land! 👏

[gadenbuie]

Thanks for the comments and review @cpsievert! Everything was easy to resolve, so I'm going to merge this.

Note: We have some flip-flopping happening with snapshots on Mac R 4.5.1 that I can't fully explain (hoping the issue will go away eventually, or we can fix as needed before next release).