#1846 feat: replace tap target on actions tab with pulsing animation

sds100 · sds100 · commit 7476b3be0803 · 2025-10-26T13:54:00.000+01:00
diff --git a/base/build.gradle.kts b/base/build.gradle.kts
@@ -93,7 +93,6 @@ dependencies {
     implementation(libs.google.flexbox)
     implementation(libs.squareup.okhttp)
     coreLibraryDesugaring(libs.desugar.jdk.libs)
-    implementation(libs.canopas.introshowcaseview)
     implementation(libs.dagger.hilt.android)
     ksp(libs.dagger.hilt.android.compiler)
     implementation(libs.bundles.splitties)
diff --git a/base/src/main/java/io/github/sds100/keymapper/base/actions/ConfigActionsViewModel.kt b/base/src/main/java/io/github/sds100/keymapper/base/actions/ConfigActionsViewModel.kt
@@ -7,7 +7,9 @@ import io.github.sds100.keymapper.base.R
 import io.github.sds100.keymapper.base.actions.keyevent.FixKeyEventActionDelegate
 import io.github.sds100.keymapper.base.keymaps.KeyMap
 import io.github.sds100.keymapper.base.keymaps.ShortcutModel
+import io.github.sds100.keymapper.base.onboarding.OnboardingTapTarget
 import io.github.sds100.keymapper.base.onboarding.OnboardingTipDelegate
+import io.github.sds100.keymapper.base.onboarding.OnboardingUseCase
 import io.github.sds100.keymapper.base.onboarding.SetupAccessibilityServiceDelegate
 import io.github.sds100.keymapper.base.utils.getFullMessage
 import io.github.sds100.keymapper.base.utils.isFixable
@@ -47,6 +49,7 @@ class ConfigActionsViewModel @Inject constructor(
     private val createAction: CreateActionUseCase,
     private val testAction: TestActionUseCase,
     private val config: ConfigActionsUseCase,
+    private val onboardingUseCase: OnboardingUseCase,
     setupAccessibilityServiceDelegate: SetupAccessibilityServiceDelegate,
     fixKeyEventActionDelegate: FixKeyEventActionDelegate,
     onboardingTipDelegate: OnboardingTipDelegate,
@@ -153,6 +156,9 @@ class ConfigActionsViewModel @Inject constructor(
             val actionData = navigate("add_action", NavDestination.ChooseAction) ?: return@launch
 
             config.addAction(actionData)
+
+            // Never show the tap target to add an action again.
+            onboardingUseCase.completedTapTarget(OnboardingTapTarget.CHOOSE_ACTION)
         }
     }
 
diff --git a/base/src/main/java/io/github/sds100/keymapper/base/keymaps/BaseConfigKeyMapScreen.kt b/base/src/main/java/io/github/sds100/keymapper/base/keymaps/BaseConfigKeyMapScreen.kt
@@ -1,6 +1,9 @@
 package io.github.sds100.keymapper.base.keymaps
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.animation.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
@@ -15,6 +18,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.ArrowBack
 import androidx.compose.material.icons.automirrored.rounded.HelpOutline
@@ -36,10 +40,12 @@ import androidx.compose.material3.Switch
 import androidx.compose.material3.Tab
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -50,12 +56,8 @@ import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.canopas.lib.showcase.IntroShowcase
 import io.github.sds100.keymapper.base.R
 import io.github.sds100.keymapper.base.compose.KeyMapperTheme
-import io.github.sds100.keymapper.base.onboarding.OnboardingTapTarget
-import io.github.sds100.keymapper.base.utils.ui.compose.KeyMapperTapTarget
-import io.github.sds100.keymapper.base.utils.ui.compose.keyMapperShowcaseStyle
 import io.github.sds100.keymapper.base.utils.ui.compose.openUriSafe
 import kotlinx.coroutines.launch
 
@@ -72,9 +74,7 @@ fun BaseConfigKeyMapScreen(
     onBackClick: () -> Unit = {},
     onDoneClick: () -> Unit = {},
     snackbarHostState: SnackbarHostState = SnackbarHostState(),
-    showActionTapTarget: Boolean = false,
-    onActionTapTargetCompleted: () -> Unit = {},
-    onSkipTutorialClick: () -> Unit = {},
+    showActionPulse: Boolean = false,
 ) {
     val scope = rememberCoroutineScope()
     val triggerHelpUrl = stringResource(R.string.url_trigger_guide)
@@ -128,48 +128,72 @@ fun BaseConfigKeyMapScreen(
                     @Composable
                     fun Tabs() {
                         for ((index, tab) in tabs.withIndex()) {
-                            val tapTarget: OnboardingTapTarget? = when {
-                                showActionTapTarget && tab == ConfigKeyMapTab.ACTIONS -> OnboardingTapTarget.CHOOSE_ACTION
-                                else -> null
-                            }
+                            val tabModifier = if (tab == ConfigKeyMapTab.ACTIONS) {
+
+                                val defaultBackgroundColor = MaterialTheme.colorScheme.surface
+                                val pulseBackgroundColor =
+                                    MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.5f)
+                                val animatedBackgroundColor =
+                                    remember { Animatable(defaultBackgroundColor) }
+
+                                var finishedAnimation by rememberSaveable { mutableStateOf(false) }
+
+                                LaunchedEffect(showActionPulse) {
+                                    var startedAnimation = false
+
+                                    repeat(10) {
+                                        // Check at the start of each repeat so that it is
+                                        // a smooth animation to the old position when it stops.
+                                        val isActionsTabSelected =
+                                            pagerState.targetPage == index && tab == ConfigKeyMapTab.ACTIONS
+
+                                        if (!showActionPulse || finishedAnimation || isActionsTabSelected) {
+                                            return@repeat
+                                        }
+
+                                        startedAnimation = true
+
+                                        animatedBackgroundColor.animateTo(
+                                            pulseBackgroundColor,
+                                            tween(700)
+                                        )
 
-                            IntroShowcase(
-                                showIntroShowCase = tapTarget != null,
-                                onShowCaseCompleted = onActionTapTargetCompleted,
-                                dismissOnClickOutside = true,
-                            ) {
-                                var tabModifier: Modifier = Modifier
-
-                                if (tapTarget != null) {
-                                    tabModifier = tabModifier.introShowCaseTarget(
-                                        index = 0,
-                                        style = keyMapperShowcaseStyle(),
-                                    ) {
-                                        KeyMapperTapTarget(
-                                            tapTarget = tapTarget,
-                                            onSkipClick = onSkipTutorialClick,
+                                        animatedBackgroundColor.animateTo(
+                                            defaultBackgroundColor,
+                                            tween(700)
                                         )
                                     }
+
+                                    if (startedAnimation) {
+                                        finishedAnimation = true
+                                    }
                                 }
 
-                                Tab(
-                                    modifier = tabModifier,
-                                    selected = pagerState.targetPage == index,
-                                    text = {
-                                        Text(
-                                            text = getTabTitle(tab),
-                                            maxLines = 1,
-                                        )
-                                    },
-                                    onClick = {
-                                        scope.launch {
-                                            pagerState.animateScrollToPage(
-                                                tabs.indexOf(tab),
-                                            )
-                                        }
-                                    },
+                                Modifier.background(
+                                    color = animatedBackgroundColor.value,
+                                    shape = RoundedCornerShape(8.dp)
                                 )
+                            } else {
+                                Modifier
                             }
+
+                            Tab(
+                                modifier = tabModifier,
+                                selected = pagerState.targetPage == index,
+                                text = {
+                                    Text(
+                                        text = getTabTitle(tab),
+                                        maxLines = 1,
+                                    )
+                                },
+                                onClick = {
+                                    scope.launch {
+                                        pagerState.animateScrollToPage(
+                                            tabs.indexOf(tab),
+                                        )
+                                    }
+                                }
+                            )
                         }
                     }
 
diff --git a/base/src/main/java/io/github/sds100/keymapper/base/keymaps/ConfigKeyMapScreen.kt b/base/src/main/java/io/github/sds100/keymapper/base/keymaps/ConfigKeyMapScreen.kt
@@ -21,7 +21,7 @@ fun ConfigKeyMapScreen(
     optionsScreen: @Composable () -> Unit,
 ) {
     val isKeyMapEnabled by keyMapViewModel.isEnabled.collectAsStateWithLifecycle()
-    val showActionTapTarget by keyMapViewModel.showActionsTapTarget.collectAsStateWithLifecycle()
+    val showActionPulse by keyMapViewModel.showActionsTapTarget.collectAsStateWithLifecycle()
     var showBackDialog by rememberSaveable { mutableStateOf(false) }
 
     if (showBackDialog) {
@@ -51,8 +51,6 @@ fun ConfigKeyMapScreen(
         },
         onDoneClick = keyMapViewModel::onDoneClick,
         snackbarHostState = snackbarHostState,
-        showActionTapTarget = showActionTapTarget,
-        onActionTapTargetCompleted = keyMapViewModel::onActionTapTargetCompleted,
-        onSkipTutorialClick = keyMapViewModel::onSkipTutorialClick,
+        showActionPulse = showActionPulse,
     )
 }
diff --git a/base/src/main/java/io/github/sds100/keymapper/base/keymaps/ConfigKeyMapViewModel.kt b/base/src/main/java/io/github/sds100/keymapper/base/keymaps/ConfigKeyMapViewModel.kt
@@ -8,10 +8,12 @@ import io.github.sds100.keymapper.base.onboarding.OnboardingUseCase
 import io.github.sds100.keymapper.base.trigger.ConfigTriggerUseCase
 import io.github.sds100.keymapper.base.utils.navigation.NavigationProvider
 import io.github.sds100.keymapper.base.utils.ui.DialogProvider
+import io.github.sds100.keymapper.common.utils.State
 import io.github.sds100.keymapper.common.utils.dataOrNull
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.combine
+import kotlinx.coroutines.flow.filterIsInstance
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.launch
@@ -38,10 +40,13 @@ class ConfigKeyMapViewModel @Inject constructor(
     val showActionsTapTarget: StateFlow<Boolean> =
         combine(
             onboarding.showTapTarget(OnboardingTapTarget.CHOOSE_ACTION),
-            configKeyMapState.keyMap,
+            configKeyMapState.keyMap.filterIsInstance<State.Data<KeyMap>>(),
         ) { showTapTarget, keyMapState ->
-            // Show the choose action tap target if they have recorded a key.
-            showTapTarget && keyMapState.dataOrNull()?.trigger?.keys?.isNotEmpty() ?: false
+            // Show the choose action tap target if they have recorded a key and
+            // have no actions.
+            showTapTarget &&
+                keyMapState.data.trigger.keys.isNotEmpty() &&
+                keyMapState.data.actionList.isEmpty()
         }.stateIn(viewModelScope, SharingStarted.Lazily, false)
 
     fun onDoneClick() {
@@ -73,14 +78,6 @@ class ConfigKeyMapViewModel @Inject constructor(
         }
     }
 
-    fun onActionTapTargetCompleted() {
-        onboarding.completedTapTarget(OnboardingTapTarget.CHOOSE_ACTION)
-    }
-
-    fun onSkipTutorialClick() {
-        onboarding.skipTapTargetOnboarding()
-    }
-
     fun onEnabledChanged(enabled: Boolean) {
         configTrigger.setEnabled(enabled)
     }
diff --git a/base/src/main/java/io/github/sds100/keymapper/base/onboarding/OnboardingTapTarget.kt b/base/src/main/java/io/github/sds100/keymapper/base/onboarding/OnboardingTapTarget.kt
@@ -1,14 +1,6 @@
 package io.github.sds100.keymapper.base.onboarding
 
-import androidx.annotation.StringRes
-import io.github.sds100.keymapper.base.R
-
 enum class OnboardingTapTarget(
-    @StringRes val titleRes: Int,
-    @StringRes val messageRes: Int,
 ) {
-    CHOOSE_ACTION(
-        titleRes = R.string.tap_target_choose_action_title,
-        messageRes = R.string.tap_target_choose_action_message,
-    ),
+    CHOOSE_ACTION,
 }
diff --git a/base/src/main/java/io/github/sds100/keymapper/base/onboarding/OnboardingUseCase.kt b/base/src/main/java/io/github/sds100/keymapper/base/onboarding/OnboardingUseCase.kt
@@ -3,9 +3,7 @@ package io.github.sds100.keymapper.base.onboarding
 import androidx.datastore.preferences.core.Preferences
 import io.github.sds100.keymapper.base.utils.VersionHelper
 import io.github.sds100.keymapper.common.BuildConfigProvider
-import io.github.sds100.keymapper.common.utils.State
 import io.github.sds100.keymapper.data.Keys
-import io.github.sds100.keymapper.data.entities.KeyMapEntity
 import io.github.sds100.keymapper.data.repositories.KeyMapRepository
 import io.github.sds100.keymapper.data.repositories.PreferenceRepository
 import io.github.sds100.keymapper.data.utils.PrefDelegate
@@ -16,7 +14,6 @@ import io.github.sds100.keymapper.system.permissions.PermissionAdapter
 import io.github.sds100.keymapper.system.shizuku.ShizukuAdapter
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.combine
-import kotlinx.coroutines.flow.filterIsInstance
 import kotlinx.coroutines.flow.map
 import javax.inject.Inject
 import javax.inject.Singleton
@@ -94,13 +91,7 @@ class OnboardingUseCaseImpl @Inject constructor(
     override fun showTapTarget(tapTarget: OnboardingTapTarget): Flow<Boolean> {
         val shownKey = getTapTargetKey(tapTarget)
 
-        return combine(
-            settingsRepository.get(shownKey).map { it ?: false },
-            settingsRepository.get(Keys.skipTapTargetTutorial).map { it ?: false },
-            keyMapRepository.keyMapList.filterIsInstance<State.Data<List<KeyMapEntity>>>(),
-        ) { isShown, skipTapTarget, keyMapList ->
-            showTutorialTapTarget(tapTarget, isShown, skipTapTarget, keyMapList.data)
-        }
+        return settingsRepository.get(shownKey).map { isShown -> !(isShown ?: false) }
     }
 
     override fun completedTapTarget(tapTarget: OnboardingTapTarget) {
@@ -109,40 +100,10 @@ class OnboardingUseCaseImpl @Inject constructor(
     }
 
     private fun getTapTargetKey(tapTarget: OnboardingTapTarget): Preferences.Key<Boolean> {
-        val key = when (tapTarget) {
-            OnboardingTapTarget.CHOOSE_ACTION -> Keys.shownTapTargetChooseAction
-        }
-        return key
-    }
-
-    /**
-     * Whether to show a tutorial tap target. This will try to determine whether the user
-     * has interacted with each feature before by checking the key maps they've created (if any).
-     * E.g if they have no key maps with actions then show a tap target highlighting the action tab
-     * when they create a key map.
-     */
-    private fun showTutorialTapTarget(
-        tapTarget: OnboardingTapTarget,
-        isShown: Boolean,
-        skipTutorial: Boolean,
-        keyMapList: List<KeyMapEntity>,
-    ): Boolean {
-        if (isShown) {
-            return false
-        }
-
-        if (skipTutorial) {
-            return false
-        }
-
         return when (tapTarget) {
-            OnboardingTapTarget.CHOOSE_ACTION -> keyMapList.all { it.actionList.isEmpty() }
+            OnboardingTapTarget.CHOOSE_ACTION -> Keys.shownTapTargetChooseAction
         }
     }
-
-    override fun skipTapTargetOnboarding() {
-        settingsRepository.set(Keys.skipTapTargetTutorial, true)
-    }
 }
 
 interface OnboardingUseCase {
@@ -167,5 +128,4 @@ interface OnboardingUseCase {
 
     fun showTapTarget(tapTarget: OnboardingTapTarget): Flow<Boolean>
     fun completedTapTarget(tapTarget: OnboardingTapTarget)
-    fun skipTapTargetOnboarding()
 }
diff --git a/base/src/main/java/io/github/sds100/keymapper/base/utils/ui/compose/KeyMapperTapTarget.kt b/base/src/main/java/io/github/sds100/keymapper/base/utils/ui/compose/KeyMapperTapTarget.kt
diff --git a/base/src/main/res/values/strings.xml b/base/src/main/res/values/strings.xml
diff --git a/data/src/main/java/io/github/sds100/keymapper/data/Keys.kt b/data/src/main/java/io/github/sds100/keymapper/data/Keys.kt
