feat(ui): slider for brush and eraser tool

[csehatt741]

Summary

A new feature was implemented to set the width of the Brush and Eraser tools using a slider.

• a new field, toolWidthSelector, was added to canvasSettingsSlice.ts to perist the current tool with selector type, which can be drop-down or slider
• a new setting was added, CanvasSettingsToolWidthSelectorDropdown, to be able to choose the used tool width selector
• existing tool width selection logic was extracted into DropDownToolWidthSelector component and new slide based selector was created in SliderToolWidthSelector component
• common tool width selection logic was extracted into ToolWidth component, which is used to build ToolBrushWith and ToolEraserWidth components
• new tanslations, controlLayers.toolWidthSelector, controlLayers.toolWidthSelectorDropDown and controlLayers.toolWidthSelectorSlider, were added to en.json

Related Issues / Discussions

Closes #8382

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)

[psychedelicious]

Thanks!

There is some layout shift when swapping between popover and slider:

Screen.Recording.2025-09-04.at.3.50.42.pm.mov

Maybe we can use a different style for the number input to prevent it from increasing the toolbar's height when slider is selected.

On my Macbook screen, the slider is large enough to push the canvas settings popover button into overflow. To find it and change the the setting back to drop-down, I need to collapse one of the panels:

Screen.Recording.2025-09-04.at.3.53.49.pm.mov

I also noticed that the slider kinda smooshes up against the color picker circles when there isn't enough room for it.

One solution might be to use container queries or a ResizeObserver to determine if we have enough room for the slider. If there isn't enough room, render the popover version. No need for a user-facing setting in this case, which is nice.

[csehatt741]

Thanks!

There is some layout shift when swapping between popover and slider:

Screen.Recording.2025-09-04.at.3.50.42.pm.mov
Maybe we can use a different style for the number input to prevent it from increasing the toolbar's height when slider is selected.

On my Macbook screen, the slider is large enough to push the canvas settings popover button into overflow. To find it and change the the setting back to drop-down, I need to collapse one of the panels:

Screen.Recording.2025-09-04.at.3.53.49.pm.mov
I also noticed that the slider kinda smooshes up against the color picker circles when there isn't enough room for it.

One solution might be to use container queries or a ResizeObserver to determine if we have enough room for the slider. If there isn't enough room, render the popover version. No need for a user-facing setting in this case, which is nice.

• number input height set
• user setting removed
• tool dynamically chosen based on available space in the toolbar

[psychedelicious]

Thanks!

• I updated the styling a bit to better fit in the toolbar.
• The logic to conditionally render the slider vs dropdown was hard to follow. I simplified it and removed the dependency on the external hook*, instead using a ResizeObserver directly in the component.

*I do like how the hook uses a singleton ResizeObserver instance as an optimization. But we only have a couple observers across the whole app and one of them is not in react. So I don't think it's really worth an extra dependency at this time.