Merge the reviewed shell updates

2026-11-05 16:17:38 +01:00 · 2026-11-05 16:17:38 +01:00 · c07bb2ca1d
commit c07bb2ca1d
parent 0fd0ec035d 2ea9301069
11 changed files with 255 additions and 53 deletions
--- a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/NavBar.kt
+++ b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/NavBar.kt
@ -2,6 +2,8 @@ package org.justinvisser.wolfskin.design

 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.tween
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
@ -21,10 +23,12 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.tv.material3.Text
@ -53,6 +57,7 @@ fun navBoxes(tabs: List<String>): List<NavBox> {
@Composable
 fun NavBar(state: ShellState, scrolled: Boolean, modifier: Modifier = Modifier) {
    val boxes = remember(state.person.hasAnime) { navBoxes(state.tabs) }
+    val labelFade = remember { tween<Color>(S.navLabelFade, easing = CubicBezierEasing(0f, 0f, .58f, 1f)) }
    val index = if (state.navFocused) state.navIndex else state.currentTab
    val box = boxes[index]
    val avatarFocused = state.navFocused && index == state.tabs.size
@ -78,10 +83,17 @@ fun NavBar(state: ShellState, scrolled: Boolean, modifier: Modifier = Modifier)
        state.tabs.forEachIndexed { itemIndex, tab ->
            val item = boxes[itemIndex]
            val focused = state.navFocused && state.navIndex == itemIndex
-            Box(Modifier.offset(item.left, item.top).size(item.width, item.height).clickable {
-                state.focusNav(itemIndex); state.key(ShellKey.Ok)
-            }, contentAlignment = Alignment.Center) {
-                Text(tab.replaceFirstChar { it.uppercase() }, style = WolfskinTokens.Type.nav, color = if (focused) C.onFocus else if (itemIndex == state.currentTab) C.fg else C.muted)
+            val labelColor by animateColorAsState(
+                if (focused) C.onFocus else if (itemIndex == state.currentTab) C.fg else C.muted,
+                animationSpec = labelFade,
+                label = "nav-label-$tab",
+            )
+            Box(Modifier.offset(item.left, item.top).size(item.width, item.height)
+                .focusProperties { canFocus = false }
+                .clickable {
+                    state.focusNav(itemIndex); state.key(ShellKey.Ok)
+                }, contentAlignment = Alignment.Center) {
+                Text(tab.replaceFirstChar { it.uppercase() }, style = WolfskinTokens.Type.nav, color = labelColor)
                if (itemIndex == state.currentTab && !focused) {
                    Box(Modifier.align(Alignment.BottomCenter).offset(y = -L.navUnderline).size(item.width - L.navItemPaddingX * 2, L.navUnderline).background(C.accent))
                }
@ -99,6 +111,7 @@ fun NavBar(state: ShellState, scrolled: Boolean, modifier: Modifier = Modifier)
        Avatar(state.person, L.navAvatar, WolfskinTokens.Type.avatarLetterNav,
            Modifier.offset(avatar.left, avatar.top)
                .focusRing(avatarFocused, L.navAvatar / 2, WolfskinTokens.Focus.ringAvatarGap, WolfskinTokens.Focus.ringAvatarRing, C.fg)
+                .focusProperties { canFocus = false }
                .clickable { state.focusNav(state.tabs.size); state.key(ShellKey.Ok) })
    }
 }
--- a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/SettingsList.kt
+++ b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/SettingsList.kt
@ -96,7 +96,7 @@ fun SettingsRow(group: SettingsGroup, focused: Boolean, openRequests: Int?, modi
        Glyph(group.key, if (focused) C.onFocus else C.accentText, Modifier.size(S.settingsIcon))
        Column(Modifier.weight(1f)) {
            val count = if (openRequests != null && openRequests > 0) " · $openRequests open" else ""
-            Text(group.title + count, color = foreground, style = WolfskinTokens.Type.listTitle.copy(fontWeight = FontWeight.Bold), maxLines = 1)
+            Text(group.title + count, color = foreground, style = WolfskinTokens.Type.listTitle, maxLines = 1)
            Text(group.description, color = if (focused) C.onFocus else C.muted, style = WolfskinTokens.Type.caption, maxLines = 1, overflow = TextOverflow.Ellipsis)
        }
        if (group.wolfskin) SettingsPill("Wolfskin", focused)
@ -112,6 +112,6 @@ private fun SettingsPill(label: String, focused: Boolean) {
        val stroke = WolfskinTokens.Focus.ringButtonRing.toPx()
        drawRoundRect(foreground.copy(alpha = .4f), cornerRadius = CornerRadius(WolfskinTokens.Radius.pill.toPx()), style = Stroke(stroke, pathEffect = PathEffect.dashPathEffect(floatArrayOf(stroke * 2, stroke * 2))))
    }.padding(horizontal = S.settingsPillPadding), contentAlignment = Alignment.Center) {
-        Text(label, color = foreground, style = WolfskinTokens.Type.caption.copy(fontWeight = FontWeight.SemiBold))
+        Text(label, color = foreground, style = WolfskinTokens.Type.caption.copy(fontWeight = WolfskinTokens.Type.label.fontWeight))
    }
 }
--- a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/ShellSurface.kt
+++ b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/ShellSurface.kt
@ -15,6 +15,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusDirection
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.input.key.Key
@ -24,6 +25,8 @@ import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.input.key.onPreviewKeyEvent
 import androidx.compose.ui.input.key.type
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.stateDescription
@ -56,11 +59,12 @@ fun ShellSurface(
 ) {
    val focus = remember { FocusRequester() }
    val contentFocus = remember { FocusRequester() }
+    val focusManager = LocalFocusManager.current
    LaunchedEffect(state.pickerVisible, state.navFocused, handlesContentKeys) {
        if (state.pickerVisible || state.navFocused || handlesContentKeys) focus.requestFocus()
        else contentFocus.requestFocus()
    }
-    Box(modifier.fillMaxSize().background(C.bg).testTag("wolfskin-shell")
+    Box(modifier.fillMaxSize().background(if (handlesContentKeys || state.pickerVisible) C.bg else Color.Transparent).testTag("wolfskin-shell")
        .semantics { stateDescription = "${state.person.key}:${state.route}:${if (state.pickerVisible) "picker" else if (state.navFocused) "nav-${state.navIndex}" else "content-${state.settingsRow}"}" }
        .focusRequester(focus)
        .onPreviewKeyEvent {
@ -68,7 +72,11 @@ fun ShellSurface(
        }
        .onKeyEvent {
            if (it.key == Key.DirectionUp && it.type == KeyEventType.KeyDown) {
-                state.navFocused = true; state.navIndex = state.currentTab; true
+                if (!focusManager.moveFocus(FocusDirection.Up)) {
+                    state.navFocused = true
+                    state.navIndex = state.currentTab
+                }
+                true
            } else false
        }.focusable()) {
        if (state.pickerVisible) {
--- a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt
+++ b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt
@ -65,15 +65,15 @@ object WolfskinTokens {
        val sheetTitle = TextStyle(fontSize = 22.0.sp, fontWeight = FontWeight(800), lineHeight = 28.6.sp, letterSpacing = -0.01.em)
        val wordmark = TextStyle(fontSize = 18.0.sp, fontWeight = FontWeight(800), lineHeight = 23.400000000000002.sp, letterSpacing = -0.02.em)
        val stateTitle = TextStyle(fontSize = 18.0.sp, fontWeight = FontWeight(400), lineHeight = 23.400000000000002.sp, letterSpacing = 0.0.em)
-        val rowHeading = TextStyle(fontSize = 17.0.sp, fontWeight = FontWeight(700), lineHeight = 22.1.sp, letterSpacing = -0.01.em)
-        val pickerName = TextStyle(fontSize = 17.0.sp, fontWeight = FontWeight(650), lineHeight = 22.1.sp, letterSpacing = 0.0.em)
-        val nav = TextStyle(fontSize = 15.0.sp, fontWeight = FontWeight(600), lineHeight = 19.5.sp, letterSpacing = 0.0.em)
-        val listTitle = TextStyle(fontSize = 15.0.sp, fontWeight = FontWeight(650), lineHeight = 19.5.sp, letterSpacing = 0.0.em)
+        val rowHeading = TextStyle(fontSize = 17.0.sp, fontWeight = FontWeight.Bold, lineHeight = 22.1.sp, letterSpacing = -0.01.em)
+        val pickerName = TextStyle(fontSize = 17.0.sp, fontWeight = FontWeight.Bold, lineHeight = 22.1.sp, letterSpacing = 0.0.em)
+        val nav = TextStyle(fontSize = 15.0.sp, fontWeight = FontWeight.Bold, lineHeight = 19.5.sp, letterSpacing = 0.0.em)
+        val listTitle = TextStyle(fontSize = 15.0.sp, fontWeight = FontWeight.Bold, lineHeight = 19.5.sp, letterSpacing = 0.0.em)
        val body = TextStyle(fontSize = 14.0.sp, fontWeight = FontWeight(400), lineHeight = 18.2.sp, letterSpacing = 0.0.em)
-        val button = TextStyle(fontSize = 14.0.sp, fontWeight = FontWeight(700), lineHeight = 18.2.sp, letterSpacing = 0.0.em)
-        val label = TextStyle(fontSize = 13.0.sp, fontWeight = FontWeight(650), lineHeight = 16.900000000000002.sp, letterSpacing = 0.0.em)
+        val button = TextStyle(fontSize = 14.0.sp, fontWeight = FontWeight.Bold, lineHeight = 18.2.sp, letterSpacing = 0.0.em)
+        val label = TextStyle(fontSize = 13.0.sp, fontWeight = FontWeight.Bold, lineHeight = 16.900000000000002.sp, letterSpacing = 0.0.em)
        val caption = TextStyle(fontSize = 12.0.sp, fontWeight = FontWeight(400), lineHeight = 15.600000000000001.sp, letterSpacing = 0.0.em)
-        val ratingPlate = TextStyle(fontSize = 14.0.sp, fontWeight = FontWeight(700), lineHeight = 16.8.sp, letterSpacing = 0.0.em)
+        val ratingPlate = TextStyle(fontSize = 14.0.sp, fontWeight = FontWeight.Bold, lineHeight = 16.8.sp, letterSpacing = 0.0.em)
        val avatarLetterPicker = TextStyle(fontSize = 50.0.sp, fontWeight = FontWeight(800))
        val avatarLetterNav = TextStyle(fontSize = 15.0.sp, fontWeight = FontWeight(800))
        val avatarLetterSheetRow = TextStyle(fontSize = 14.0.sp, fontWeight = FontWeight(800))
@ -230,6 +230,7 @@ object WolfskinTokens {
        const val comingInVisibleRows = 5.0f
    }
    object Shell {
+        const val navLabelFade = 200
        val zero = 0.0.dp
        val stageWidth = 960.0.dp
        val stageHeight = 540.0.dp