Widget config: readability info as a popover beside Opacity (#489)

app/src/main/java/de/jeanlucmakiola/calendula/widget/config/WidgetConfigScreen.kt

@@ -70,6 +70,7 @@ import de.jeanlucmakiola.floret.glance.WallpaperWindow
 import de.jeanlucmakiola.floret.glance.WidgetBackground
 import kotlin.math.roundToInt
 import de.jeanlucmakiola.floret.components.GroupedSliderRow
+import de.jeanlucmakiola.floret.components.InfoPopover
 import de.jeanlucmakiola.calendula.widget.AgendaWidgetStyle
 import java.text.NumberFormat
 import de.jeanlucmakiola.floret.locale.currentLocale
@@ -245,7 +246,6 @@ private fun ConfigOptions(
             onSelect = { onAppearance(state.appearance.copy(background = it)) },
             position = Position.Top,
         )
-        var showReadability by rememberSaveable { mutableStateOf(false) }
         val faded = state.appearance.background != WidgetBackground.TRANSPARENT
         val content = state.draft.content
         val classic = state.kind == WidgetKind.AGENDA && content.style == AgendaWidgetStyle.CLASSIC
@@ -261,7 +261,14 @@ private fun ConfigOptions(
                 },
                 valueRange = MIN_OPACITY..1f,
                 steps = OPACITY_STEPS,
-                trailing = { ReadabilityInfoButton { showReadability = !showReadability } },
+                titleAccessory = {
+                    InfoPopover(
+                        text = stringResource(
+                            if (classic) R.string.widget_config_readability_hint_classic else R.string.widget_config_readability_hint,
+                        ),
+                        contentDescription = stringResource(R.string.widget_config_readability_info),
+                    )
+                },
             )
         }
         if (faded && classic) {
@@ -270,10 +277,7 @@ private fun ConfigOptions(
                 summary = stringResource(R.string.widget_config_invert_text_summary),
                 position = Position.Middle,
                 trailing = {
-                    Row(verticalAlignment = Alignment.CenterVertically) {
-                        ReadabilityInfoButton { showReadability = !showReadability }
-                        Switch(checked = content.invertText, onCheckedChange = { onContent(content.copy(invertText = it)) })
-                    }
+                    Switch(checked = content.invertText, onCheckedChange = { onContent(content.copy(invertText = it)) })
                 },
                 onClick = { onContent(content.copy(invertText = !content.invertText)) },
             )
@@ -286,12 +290,6 @@ private fun ConfigOptions(
             onSelect = { onAppearance(state.appearance.copy(theme = it)) },
             position = Position.Bottom,
         )
-        AnimatedVisibility(visible = faded && showReadability) {
-            GroupedHint(
-                stringResource(if (classic) R.string.widget_config_readability_hint_classic else R.string.widget_config_readability_hint),
-                verticalPadding = 8.dp,
-            )
-        }
         if (state.kind == WidgetKind.COUNTDOWN) {
             CountdownOptionsSection(
                 options = state.draft.countdown,
@@ -422,18 +420,6 @@ private fun ContentOptions(
     }
 }
 
-/** The "i" beside the opacity and text-colour options; toggles the readability hint below them. */
-@Composable
-private fun ReadabilityInfoButton(onClick: () -> Unit) {
-    IconButton(onClick = onClick) {
-        Icon(
-            Icons.Outlined.Info,
-            contentDescription = stringResource(R.string.widget_config_readability_info),
-            tint = MaterialTheme.colorScheme.onSurfaceVariant,
-        )
-    }
-}
-
 @Composable
 private fun agendaStyleLabel(style: AgendaWidgetStyle): String = stringResource(
     when (style) {