Add icons to component sections in standalone demo (#363)

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt

@@ -9,9 +9,14 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import org.jetbrains.jewel.foundation.modifier.trackActivation
 import org.jetbrains.jewel.foundation.theme.JewelTheme
@@ -25,6 +30,7 @@ import org.jetbrains.jewel.ui.component.Icon
 import org.jetbrains.jewel.ui.component.SelectableIconButton
 import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.Tooltip
+import org.jetbrains.jewel.ui.component.TooltipPlacement
 import org.jetbrains.jewel.ui.component.Typography
 import org.jetbrains.jewel.ui.component.styling.LocalIconButtonStyle
 import org.jetbrains.jewel.ui.painter.hints.Size
@@ -43,14 +49,17 @@ fun ComponentsView() {
 
 @Composable
 fun ComponentsToolBar() {
-    Column(Modifier.fillMaxHeight().width(40.dp)) {
+    Column(Modifier.fillMaxHeight().width(40.dp).verticalScroll(rememberScrollState())) {
         ComponentsViewModel.views.forEach {
-            Tooltip({
-                Text("Show ${it.title}")
-            }) {
-                SelectableIconButton(ComponentsViewModel.currentView == it, {
-                    ComponentsViewModel.currentView = it
-                }, Modifier.size(40.dp).padding(5.dp)) { state ->
+            Tooltip(
+                tooltip = { Text("Show ${it.title}") },
+                tooltipPlacement = TooltipPlacement(DpOffset(40.dp, 0.dp), Alignment.End, LocalDensity.current),
+            ) {
+                SelectableIconButton(
+                    selected = ComponentsViewModel.currentView == it,
+                    onClick = { ComponentsViewModel.currentView = it },
+                    modifier = Modifier.size(40.dp).padding(5.dp),
+                ) { state ->
                     val tint by LocalIconButtonStyle.current.colors.foregroundFor(state)
                     val painterProvider = rememberResourcePainterProvider(it.icon, StandaloneSampleIcons::class.java)
                     val painter by painterProvider.getPainter(Size(20), Stroke(tint))

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Borders.kt

@@ -18,13 +18,15 @@ import androidx.compose.ui.unit.dp
 import org.jetbrains.jewel.foundation.Stroke
 import org.jetbrains.jewel.foundation.modifier.border
 import org.jetbrains.jewel.foundation.theme.JewelTheme
+import org.jetbrains.jewel.samples.standalone.viewmodel.View
 import org.jetbrains.jewel.ui.component.GroupHeader
 import org.jetbrains.jewel.ui.component.OutlinedButton
 import org.jetbrains.jewel.ui.component.RadioButtonRow
 import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.theme.colorPalette
 
 @Composable
+@View("Borders", position = 13, icon = "icons/components/borders.svg")
 internal fun Borders() {
     GroupHeader("Borders")
     var borderAlignment by remember { mutableStateOf(Stroke.Alignment.Center) }

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Buttons.kt

@@ -16,7 +16,7 @@ import org.jetbrains.jewel.ui.component.OutlinedButton
 import org.jetbrains.jewel.ui.component.Text
 
 @Composable
-@View(title = "Buttons", position = 0)
+@View(title = "Buttons", position = 0, icon = "icons/components/button.svg")
 fun Buttons() {
     Row(
         modifier = Modifier.fillMaxWidth(),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Checkboxes.kt

@@ -15,7 +15,7 @@ import org.jetbrains.jewel.ui.Outline
 import org.jetbrains.jewel.ui.component.TriStateCheckboxRow
 
 @Composable
-@View(title = "Checkboxes", position = 1)
+@View(title = "Checkboxes", position = 1, icon = "icons/components/checkBox.svg")
 fun Checkboxes() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ChipsAndTree.kt

@@ -46,7 +46,7 @@ import org.jetbrains.jewel.ui.theme.colorPalette
 import kotlin.random.Random
 
 @Composable
-@View(title = "Chips and trees", position = 11, icon = "icons/showAsTree.svg")
+@View(title = "Chips and trees", position = 11, icon = "icons/components/tree.svg")
 fun ChipsAndTree() {
     Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)) {
         Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(8.dp)) {

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Dropdowns.kt

@@ -18,7 +18,7 @@ import org.jetbrains.jewel.ui.component.styling.DropdownStyle
 import kotlin.random.Random
 
 @Composable
-@View(title = "Dropdowns", position = 3)
+@View(title = "Dropdowns", position = 3, icon = "icons/components/comboBox.svg")
 fun Dropdowns() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Icons.kt

@@ -29,7 +29,7 @@ import org.jetbrains.jewel.ui.painter.rememberResourcePainterProvider
 import org.jetbrains.jewel.ui.theme.colorPalette
 
 @Composable
-@View(title = "Icons", position = 6)
+@View(title = "Icons", position = 6, icon = "icons/components/toolbar.svg")
 internal fun Icons() {
     Row(
         modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Links.kt

@@ -17,7 +17,7 @@ import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.separator
 
 @Composable
-@View(title = "Links", position = 4)
+@View(title = "Links", position = 4, icon = "icons/components/links.svg")
 fun Links() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/ProgressBar.kt

@@ -26,7 +26,7 @@ import org.jetbrains.jewel.ui.component.IndeterminateHorizontalProgressBar
 import org.jetbrains.jewel.ui.component.Text
 
 @Composable
-@View(title = "ProgressBar", position = 5)
+@View(title = "ProgressBar", position = 5, icon = "icons/components/progressbar.svg")
 fun ProgressBar() {
     val transition = rememberInfiniteTransition()
     val currentOffset by transition.animateFloat(

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/RadioButtons.kt

@@ -14,7 +14,7 @@ import org.jetbrains.jewel.ui.Outline
 import org.jetbrains.jewel.ui.component.RadioButtonRow
 
 @Composable
-@View(title = "Radio Buttons", position = 2)
+@View(title = "Radio Buttons", position = 2, icon = "icons/components/radioButton.svg")
 fun RadioButtons() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Slider.kt

@@ -9,7 +9,7 @@ import org.jetbrains.jewel.samples.standalone.viewmodel.View
 import org.jetbrains.jewel.ui.component.Slider
 
 @Composable
-@View(title = "Sliders", position = 12)
+@View(title = "Sliders", position = 12, icon = "icons/components/slider.svg")
 fun Sliders() {
     var value1 by remember { mutableStateOf(.45f) }
     Slider(

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tabs.kt

@@ -34,7 +34,7 @@ import org.jetbrains.jewel.ui.util.thenIf
 import kotlin.math.max
 
 @Composable
-@View(title = "Tabs", position = 7)
+@View(title = "Tabs", position = 7, icon = "icons/components/tabs.svg")
 fun Tabs() {
     Text("Default tabs", Modifier.fillMaxWidth())
     DefaultTabShowcase()

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextAreas.kt

@@ -31,7 +31,7 @@ private const val LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipisc
     "Sed nec sapien nec dui rhoncus bibendum. Sed blandit bibendum libero."
 
 @Composable
-@View(title = "TextAreas", position = 8)
+@View(title = "TextAreas", position = 8, icon = "icons/components/textArea.svg")
 fun TextAreas() {
     Row(
         Modifier.padding(horizontal = 16.dp).height(150.dp),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt

@@ -38,7 +38,7 @@ import org.jetbrains.jewel.ui.painter.hints.Stateful
 import org.jetbrains.jewel.ui.painter.rememberResourcePainterProvider
 
 @Composable
-@View(title = "TextFields", position = 9)
+@View(title = "TextFields", position = 9, icon = "icons/components/textField.svg")
 fun TextFields() {
     Row(
         horizontalArrangement = Arrangement.spacedBy(10.dp),

samples/standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Tooltips.kt

@@ -11,7 +11,7 @@ import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.Tooltip
 
 @Composable
-@View(title = "Tooltips", position = 10)
+@View(title = "Tooltips", position = 10, icon = "icons/components/tooltip.svg")
 fun Tooltips() {
     Tooltip(tooltip = {
         Text("This is a tooltip")