Header rework

modules/internal/src/main/kotlin/org/polyfrost/oneconfig/internal/ui/components/Button.kt

@@ -1,11 +1,14 @@
 package org.polyfrost.oneconfig.internal.ui.components
 
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.border
 import androidx.compose.foundation.interaction.collectIsHoveredAsState
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import org.polyfrost.oneconfig.internal.ui.themes.LocalTheme
 
 enum class IconButtonType {
@@ -19,19 +22,36 @@ fun IconButton(
     modifier: Modifier = Modifier,
     foreground: Color = LocalTheme.current.textColor.copy(0.7f),
     hoveredForeground: Color = LocalTheme.current.textColor,
+    enabled: Boolean = true,
+    /** Outlines the button on hover; off by default so small inline icons (field clear buttons) stay bare */
+    hoverBorder: Boolean = false,
     onClick: () -> Unit,
 ) {
     val interactionSource = rememberInteractionSource()
 
     val isHovered by interactionSource.collectIsHoveredAsState()
 
     val iconColor by animateColorAsState(
-        if (isHovered) hoveredForeground else foreground
+        if (!enabled) {
+            LocalTheme.current.textColorSecondary.copy(alpha = 0.35f)
+        } else {
+            if (isHovered) hoveredForeground else foreground
+        }
+    )
+    val borderColor by animateColorAsState(
+        if (hoverBorder && enabled && isHovered) LocalTheme.current.borderColor
+        else LocalTheme.current.borderColor.copy(0f)
     )
 
     Icon(
         iconName,
-        color = iconColor, modifier = Modifier.onClick(interactionSource, onClick).then(modifier)
+        color = iconColor,
+        modifier = Modifier.onClick(interactionSource, enabled, onClick).then(modifier)
+            // inset the glyph so the outline doesn't hug it; size bordered buttons 8dp larger to keep the icon size
+            .then(
+                if (hoverBorder) Modifier.border(1.dp, borderColor, LocalTheme.current.buttonShape).padding(4.dp)
+                else Modifier
+            )
     )
 }
 

modules/internal/src/main/kotlin/org/polyfrost/oneconfig/internal/ui/components/Chips.kt

@@ -3,6 +3,7 @@ package org.polyfrost.oneconfig.internal.ui.components
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.collectIsHoveredAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
@@ -11,6 +12,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.input.pointer.PointerIcon
 import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.unit.dp
@@ -26,8 +30,11 @@ fun Chip(
     onClick: () -> Unit,
 ) {
     val interactionSource = rememberInteractionSource()
+    val isHovered by interactionSource.collectIsHoveredAsState()
+    val theme = LocalTheme.current
+    val hoverBackground = Accent.copy(alpha = 0.5f).compositeOver(theme.chipBackground)
     val backgroundColor by animateColorAsState(
-        if (selected) Accent else LocalTheme.current.chipBackground
+        if (selected) Accent else if (isHovered) hoverBackground else theme.chipBackground
     )
     val textColor by animateColorAsState(
         if (selected) LocalTheme.current.accentTextColor else LocalTheme.current.textColor
@@ -52,4 +59,4 @@ fun Chip(
             Text(label, fontSize = 14.sp, color = textColor)
         }
     }
-}
+}

modules/internal/src/main/kotlin/org/polyfrost/oneconfig/internal/ui/components/Header.kt

@@ -1,6 +1,7 @@
 package org.polyfrost.oneconfig.internal.ui.components
 
 import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
@@ -14,6 +15,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -49,11 +51,25 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Popup
 import androidx.compose.ui.window.PopupProperties
+import androidx.navigation.NavBackStackEntry
+import androidx.navigation.NavDestination.Companion.hasRoute
+import androidx.navigation.NavDestination.Companion.hierarchy
 import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.toRoute
 import org.polyfrost.oneconfig.api.ui.v1.keybind.trackTextInputFocus
 import org.polyfrost.oneconfig.internal.ui.LocalCloseRequest
+import org.polyfrost.oneconfig.internal.ui.api.ConfigRegistry
 import org.polyfrost.oneconfig.internal.ui.api.Tooltip
 import org.polyfrost.oneconfig.internal.ui.components.dropdown.DropdownPositionProvider
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.ChangeLogEntryRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.ChangeLogRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.CreditsRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.KeybindsRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.ModConfigRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.ModsRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.PreferencesRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.ProfilesRoute
+import org.polyfrost.oneconfig.internal.ui.navigation.graph.ThemesRoute
 import org.polyfrost.oneconfig.internal.ui.navigation.searchPlaceholder
 import org.polyfrost.oneconfig.internal.ui.shell.LocalNavController
 import org.polyfrost.oneconfig.internal.ui.shell.SearchFocus
@@ -65,6 +81,14 @@ import org.polyfrost.oneconfig.internal.ui.themes.LocalTheme
 fun Header(modifier: Modifier = Modifier) {
     val controller = LocalNavController.wrapper
     val closeRequest = LocalCloseRequest.current
+    val backStackEntry by LocalNavController.current.currentBackStackEntryAsState()
+    val title = remember(backStackEntry, ConfigRegistry.revision) { backStackEntry.headerTitle() }
+    val openOriginalScreen = title?.openOriginalScreen
+    // historyRevision reads snapshot state so this recomposes and re-queries the stacks whenever the
+    // (plain ArrayDeque) history changes; the stacks stay the single source of truth.
+    controller.historyRevision
+    val canGoBack = controller.canGoBack()
+    val canGoForward = controller.canGoForward()
 
     Row(
         modifier = modifier.fillMaxWidth().height(36.dp),
@@ -73,29 +97,65 @@ fun Header(modifier: Modifier = Modifier) {
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(24.dp)
         ) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.spacedBy(16.dp)
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
             ) {
-                IconButton("left-arrow") { controller.back() }
-                IconButton("right-arrow") { controller.forward() }
+                IconButton("left-arrow", Modifier.size(32.dp), enabled = canGoBack, hoverBorder = true) { controller.back() }
+                IconButton("right-arrow", Modifier.size(32.dp), enabled = canGoForward, hoverBorder = true) { controller.forward() }
             }
-            AnimatedContent(
-                ShellState.title,
-                transitionSpec = {
-                    fadeIn() togetherWith fadeOut()
+            Spacer(Modifier.size(24.dp))
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                AnimatedContent(
+                    title,
+                    transitionSpec = {
+                        fadeIn() togetherWith fadeOut()
+                    }
+                ) { headerTitle ->
+                    headerTitle?.let { info ->
+                        Row(
+                            verticalAlignment = Alignment.CenterVertically,
+                            horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        ) {
+                            Text(
+                                info.text,
+                                color = LocalTheme.current.textColor,
+                                fontSize = 24.sp,
+                                fontWeight = FontWeight.Medium
+                            )
+                            TitleAuthorByline(info.authors)
+                            TitleInfoTooltip(info)
+                        }
+                    }
                 }
-            ) { text ->
-                text?.let {
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.spacedBy(8.dp),
-                    ) {
-                        Text(it, color = LocalTheme.current.textColor, fontSize = 24.sp, fontWeight = FontWeight.Medium)
-                        TitleAuthorByline(it)
-                        TitleInfoTooltip(it)
+                // Separate animation keeps the button composed exactly once per frame while still giving
+                // it the same fade as the title. Sharing the title's AnimatedContent duplicated the
+                // button per transition target, and the outgoing copy had no byline or tooltip (both
+                // gated on the current title) so it briefly showed against the bare title.
+                //
+                // AnimatedVisibility rather than AnimatedContent: the header Row vertically centers its
+                // children, so animating AnimatedContent's measured size re-centers it and drags the
+                // button around. AnimatedVisibility only fades and keeps the content's natural size for
+                // the whole transition, so the Row never has to re-center it.
+                var lastAction by remember { mutableStateOf<Runnable?>(null) }
+                LaunchedEffect(openOriginalScreen) {
+                    if (openOriginalScreen != null) lastAction = openOriginalScreen
+                }
+                AnimatedVisibility(
+                    visible = openOriginalScreen != null,
+                    enter = fadeIn(),
+                    exit = fadeOut(),
+                ) {
+                    // one Row so the spacer and the button share a single measured node and keep their
+                    // horizontal order
+                    // prefer the live action so switching between two mods never shows the previous
+                    // mod's runnable for the frame before the effect updates lastAction
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        (openOriginalScreen ?: lastAction)?.let {
+                            Spacer(Modifier.size(8.dp))
+                            OpenOriginalScreenButton(it)
+                        }
                     }
                 }
             }
@@ -105,13 +165,61 @@ fun Header(modifier: Modifier = Modifier) {
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(26.dp)
         ) {
-            ShellState.openOriginalScreen?.let { OpenOriginalScreenButton(it) }
             GlobalSearchBar()
-            IconButton("close") { closeRequest() }
+            IconButton("close", Modifier.size(32.dp), hoverBorder = true) { closeRequest() }
         }
     }
 }
 
+/**
+ * The header title and its extra info, resolved purely from the entry currently on top of the back
+ * stack.
+ *
+ * Deliberately derived from the live back-stack entry instead of screen-owned `ShellState` fields: a
+ * screen-scoped `DisposableEffect` only clears on dispose, which NavHost delays until the outgoing
+ * screen's exit transition finishes, so the outgoing screen's `onDispose` wiped the incoming screen's
+ * title info mid-transition (the byline vanished and the "Open original screen" button outlived its
+ * page). Deriving it here makes the title a pure function of the current route, so each transition
+ * target renders its own content.
+ */
+private data class HeaderTitle(
+    val text: String,
+    val authors: String? = null,
+    val credits: String? = null,
+    val version: String? = null,
+    val openOriginalScreen: Runnable? = null,
+)
+
+private fun NavBackStackEntry?.headerTitle(): HeaderTitle? {
+    val entry = this ?: return null
+    val destination = entry.destination
+
+    if (destination.hasRoute(ModConfigRoute::class)) {
+        val id = runCatching { entry.toRoute<ModConfigRoute>().id }.getOrNull() ?: return null
+        val config = ConfigRegistry.findById(id) ?: return null
+        val tree = ConfigRegistry.findTree(id)
+        return HeaderTitle(
+            text = config.title.asRenderText(),
+            authors = config.authors,
+            credits = config.credits,
+            version = config.version,
+            openOriginalScreen = tree?.getMetadata<Runnable>("open_original_screen"),
+        )
+    }
+
+    return when {
+        destination.hierarchy.any { it.hasRoute(ModsRoute::class) } -> HeaderTitle("Mods")
+        destination.hierarchy.any { it.hasRoute(ProfilesRoute::class) } -> HeaderTitle("Profiles")
+        destination.hierarchy.any { it.hasRoute(KeybindsRoute::class) } -> HeaderTitle("Keybinds")
+        destination.hierarchy.any { it.hasRoute(ThemesRoute::class) } -> HeaderTitle("Themes")
+        destination.hierarchy.any { it.hasRoute(PreferencesRoute::class) } -> HeaderTitle("Preferences")
+        destination.hierarchy.any { it.hasRoute(ChangeLogRoute::class) || it.hasRoute(ChangeLogEntryRoute::class) } ->
+            HeaderTitle("Changelog")
+        destination.hierarchy.any { it.hasRoute(CreditsRoute::class) } -> HeaderTitle("Credits")
+        else -> null
+    }
+}
+
 @Composable
 private fun OpenOriginalScreenButton(runnable: Runnable) {
     val theme = LocalTheme.current
@@ -135,18 +243,24 @@ private fun OpenOriginalScreenButton(runnable: Runnable) {
                 .pointerHoverIcon(PointerIcon.Hand)
                 .background(bgColor, theme.buttonShape)
                 .onClick(interactionSource) { runnable.run() }
+                .border(1.dp, LocalTheme.current.borderColor, LocalTheme.current.buttonShape)
                 .padding(horizontal = 16.dp, vertical = 6.dp),
             contentAlignment = Alignment.Center,
         ) {
-            Text("Open original screen", color = theme.accentTextColor, fontSize = 13.sp)
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+            ) {
+                Icon("external-link", color = theme.accentTextColor, modifier = Modifier.size(14.dp))
+                Text("Original menu", color = theme.accentTextColor, fontSize = 13.sp)
+            }
         }
     }
 }
 
 @Composable
-private fun TitleAuthorByline(title: String) {
-    if (ShellState.titleInfoForTitle != title) return
-    val byline = ShellState.titleAuthors?.authorByline() ?: return
+private fun TitleAuthorByline(authors: String?) {
+    val byline = authors?.authorByline() ?: return
     Text(
         byline,
         color = LocalTheme.current.textColorSecondary,
@@ -168,11 +282,10 @@ private fun String.authorByline(): String? {
 }
 
 @Composable
-private fun TitleInfoTooltip(title: String) {
-    if (ShellState.titleInfoForTitle != title) return
-    val version = ShellState.titleVersion
-    val authors = ShellState.titleAuthors
-    val credits = ShellState.titleCredits
+private fun TitleInfoTooltip(title: HeaderTitle) {
+    val version = title.version
+    val authors = title.authors
+    val credits = title.credits
     if (version == null && authors == null && credits == null) return
     val interactionSource = rememberInteractionSource()
     val isHovered by interactionSource.collectIsHoveredAsState()

modules/internal/src/main/kotlin/org/polyfrost/oneconfig/internal/ui/components/Sidebar.kt

@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -256,7 +257,7 @@ private fun Account() {
                 horizontalArrangement = Arrangement.spacedBy(12.dp),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                PlayerHead(Modifier.size(32.dp))
+                PlayerHead(Modifier.size(32.dp).offset(x = 2.dp))
                 Column(
                     verticalArrangement = Arrangement.spacedBy(2.dp),
                 ) {