Add floating zoom control bar to the icon grid for dynamic visual display size adjustment#973
Merged
Merged
Conversation
WalkthroughThis PR adds a ZoomFloatingBar component for controlling icon display size (25%–200%) without affecting import settings and updates the changelog. It introduces JewelTheme.Companion.overlay and onOverlay colors, changes VerticalDivider to accept a color parameter, and adds enabled parameters to several toolbar/tooltip icon button APIs. Material and Standard import screens (and related UI) now maintain a scaleFactor state, apply scaled icon sizes, and conditionally render the floating zoom bar. Multiple UI components were updated to use the new theme overlay colors. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/IconSizeCustomization.kt (1)
64-64: ⚡ Quick win
HorizontalDividernot migrated toJewelTheme.onOverlay.
MaterialFontCustomization(the other customization panel with the same CustomizationToolbar + HorizontalDivider + content structure) was updated toJewelTheme.onOverlayin this PR. This panel was missed, leaving an inconsistency in light mode whereLocalGroupHeaderStyle.current.colors.dividerandJewelTheme.globalColors.borders.disabledwill produce different divider colors.♻️ Proposed fix
-import org.jetbrains.jewel.ui.component.styling.LocalGroupHeaderStyle +import io.github.composegears.valkyrie.jewel.colors.onOverlay ... - HorizontalDivider(color = LocalGroupHeaderStyle.current.colors.divider) + HorizontalDivider(color = JewelTheme.onOverlay)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/IconSizeCustomization.kt` at line 64, In IconSizeCustomization (the panel using CustomizationToolbar + HorizontalDivider + content), replace the direct use of HorizontalDivider(color = LocalGroupHeaderStyle.current.colors.divider) with the same pattern used in MaterialFontCustomization by wrapping the divider in JewelTheme.onOverlay { ... } and using the overlay border color (JewelTheme.globalColors.borders.disabled) so the divider color is consistent in overlay/light modes; update the HorizontalDivider invocation inside IconSizeCustomization accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/ZoomFloatingBar.kt`:
- Around line 46-47: The KDoc for the constant ZOOM_MIN_SCALE is incorrect (says
"50%") while the value is 0.25f (25%); update the comment above the
ZOOM_MIN_SCALE constant in ZoomFloatingBar.kt to state the correct minimum scale
("25%") so it matches the value and the CHANGELOG (25%–200%).
- Around line 138-155: Replace the three hardcoded user-facing strings in
ZoomFloatingBar.kt with stringResource calls: change the TooltipIconButton/Text
contentDescription and tooltipText that currently use "Zoom", "Collapse zoom
bar", and "Collapse" to use localized string resource keys (e.g., create/use
keys like accessibility.zoom, accessibility.zoom.collapseBar,
accessibility.collapse) and reference them via stringResource(...) where
TooltipIconButton and the Text use the values; add the corresponding entries to
the strings resource file so the keys resolve.
---
Nitpick comments:
In
`@tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/IconSizeCustomization.kt`:
- Line 64: In IconSizeCustomization (the panel using CustomizationToolbar +
HorizontalDivider + content), replace the direct use of HorizontalDivider(color
= LocalGroupHeaderStyle.current.colors.divider) with the same pattern used in
MaterialFontCustomization by wrapping the divider in JewelTheme.onOverlay { ...
} and using the overlay border color (JewelTheme.globalColors.borders.disabled)
so the divider color is consistent in overlay/light modes; update the
HorizontalDivider invocation inside IconSizeCustomization accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 3bd7de4a-72fa-4706-9e61-915f7943a555
📒 Files selected for processing (12)
tools/idea-plugin/CHANGELOG.mdtools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/Toolbar.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/VerticalDivider.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/button/TooltipIconButton.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/colors/JewelColors.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/mode/iconpack/conversion/ui/DragAndDropOverlay.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/IconSizeCustomization.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/SidePanel.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/ZoomFloatingBar.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/MaterialSymbolsImportScreen.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/ui/MaterialFontCustomization.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/standard/common/StandardImportScreenUI.kt
7727540 to
31aa1c3
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/button/TooltipIconButton.kt (1)
39-58: ⚡ Quick win
ImageVectoroverload is missing theenabledparameter — API asymmetry with theIconKeyoverload.Both overloads delegate to
IconActionButton, which acceptsenabledregardless of whether it receives anIconKeyor aPainter. Leaving it off theImageVectoroverload means callers using that path can never disable the button.♻️ Proposed fix
`@Composable` fun TooltipIconButton( imageVector: ImageVector, contentDescription: String?, onClick: () -> Unit, tooltipText: String, modifier: Modifier = Modifier, + enabled: Boolean = true, ) { IconActionButton( modifier = modifier, painter = rememberVectorPainter(imageVector), onClick = onClick, focusable = false, + enabled = enabled, contentDescription = contentDescription, tooltip = { Text(text = tooltipText) }, ) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/button/TooltipIconButton.kt` around lines 39 - 58, The ImageVector overload TooltipIconButton is missing an enabled parameter, causing API asymmetry with the IconKey overload and preventing callers from disabling the button; add an enabled: Boolean = true parameter to TooltipIconButton and pass it through to the delegated IconActionButton call (i.e., include enabled in the IconActionButton(...) argument list) so both overloads accept and forward the enabled flag consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/button/TooltipIconButton.kt`:
- Around line 39-58: The ImageVector overload TooltipIconButton is missing an
enabled parameter, causing API asymmetry with the IconKey overload and
preventing callers from disabling the button; add an enabled: Boolean = true
parameter to TooltipIconButton and pass it through to the delegated
IconActionButton call (i.e., include enabled in the IconActionButton(...)
argument list) so both overloads accept and forward the enabled flag
consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: ccd920fa-9096-495f-af2f-9e7ec35a15b1
📒 Files selected for processing (13)
tools/idea-plugin/CHANGELOG.mdtools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/Toolbar.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/VerticalDivider.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/button/TooltipIconButton.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/colors/JewelColors.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/mode/iconpack/conversion/ui/DragAndDropOverlay.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/IconSizeCustomization.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/SidePanel.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/ZoomFloatingBar.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/MaterialSymbolsImportScreen.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/ui/MaterialFontCustomization.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/standard/common/StandardImportScreenUI.kttools/idea-plugin/src/main/resources/messages/Valkyrie.properties
✅ Files skipped from review due to trivial changes (7)
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/mode/iconpack/conversion/ui/DragAndDropOverlay.kt
- tools/idea-plugin/src/main/resources/messages/Valkyrie.properties
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/VerticalDivider.kt
- tools/idea-plugin/CHANGELOG.md
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/SidePanel.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/standard/common/StandardImportScreenUI.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/ui/MaterialFontCustomization.kt
🚧 Files skipped from review as they are similar to previous changes (4)
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/IconSizeCustomization.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/colors/JewelColors.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/ZoomFloatingBar.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/Toolbar.kt
…play size adjustment
31aa1c3 to
606cc2b
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/colors/JewelColors.kt (1)
44-52: ⚡ Quick winAvoid tying a theme token to
LocalGroupHeaderStyle.
JewelTheme.onOverlaynow varies with a component-local style in dark mode, so the same overlay surface can resolve to different divider colors depending on where it is read. If that variability isn’t intentional, keep this accessor derived from the Jewel theme palette only.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/colors/JewelColors.kt` around lines 44 - 52, JewelTheme.onOverlay currently reads from LocalGroupHeaderStyle in dark mode which ties a global theme token to a component-local style; change it to derive solely from the Jewel theme palette instead. Replace the conditional branch that returns LocalGroupHeaderStyle.current.colors.divider with a lookup on JewelTheme.globalColors (for example use the same borders.disabled token or the appropriate onOverlay/divider token from JewelTheme.globalColors) so both dark and light branches come from theme tokens (keep the existing light branch JewelTheme.globalColors.borders.disabled or swap both branches to a single globalColors token).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/colors/JewelColors.kt`:
- Around line 44-52: JewelTheme.onOverlay currently reads from
LocalGroupHeaderStyle in dark mode which ties a global theme token to a
component-local style; change it to derive solely from the Jewel theme palette
instead. Replace the conditional branch that returns
LocalGroupHeaderStyle.current.colors.divider with a lookup on
JewelTheme.globalColors (for example use the same borders.disabled token or the
appropriate onOverlay/divider token from JewelTheme.globalColors) so both dark
and light branches come from theme tokens (keep the existing light branch
JewelTheme.globalColors.borders.disabled or swap both branches to a single
globalColors token).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 7dd8691f-918e-4b94-82bb-ac590a3498e5
📒 Files selected for processing (13)
tools/idea-plugin/CHANGELOG.mdtools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/Toolbar.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/VerticalDivider.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/button/TooltipIconButton.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/colors/JewelColors.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/mode/iconpack/conversion/ui/DragAndDropOverlay.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/IconSizeCustomization.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/SidePanel.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/ZoomFloatingBar.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/MaterialSymbolsImportScreen.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/ui/MaterialFontCustomization.kttools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/standard/common/StandardImportScreenUI.kttools/idea-plugin/src/main/resources/messages/Valkyrie.properties
✅ Files skipped from review due to trivial changes (7)
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/ui/MaterialFontCustomization.kt
- tools/idea-plugin/src/main/resources/messages/Valkyrie.properties
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/SidePanel.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/VerticalDivider.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/jewel/Toolbar.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/common/ui/ZoomFloatingBar.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/material/MaterialSymbolsImportScreen.kt
🚧 Files skipped from review as they are similar to previous changes (3)
- tools/idea-plugin/CHANGELOG.md
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/mode/iconpack/conversion/ui/DragAndDropOverlay.kt
- tools/idea-plugin/src/main/kotlin/io/github/composegears/valkyrie/ui/screen/webimport/standard/common/StandardImportScreenUI.kt
t-regbs
approved these changes
May 2, 2026
| ) | ||
| AnimatedVisibility( | ||
| visible = expanded, | ||
| enter = expandHorizontally(expandFrom = Alignment.End) + fadeIn(), |
Collaborator
There was a problem hiding this comment.
Minor: the repeated expandHorizontally(...) + fadeIn() / shrinkHorizontally(...) + fadeOut() specs could be extracted locally
Member
Author
There was a problem hiding this comment.
Auto merged, will be separate pr 😄
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Screen.Recording.2026-05-02.at.14.12.59.mov
📝 Changelog
If this PR introduces user-facing changes, please update the relevant Unreleased section in changelogs: