Add how to use to remote controls (#937)

**Background**

How to use dialog will help new users to understand

**Changes**

- Add how to use dialog

**Test plan**

- Open saved remote and click how to use

CHANGELOG.md

@@ -10,6 +10,7 @@ Attention: don't forget to add the flag for F-Droid before release
 - [Feature] Add onetap widget
 - [Feature] Save, edit, share remote control
 - [Feature] More UI elements for remote-controls
+- [Feature] Add How to Use dialog into remote-controls
 - [Feature] Skip infrared signals on setup screen
 - [Refactor] Load RemoteControls from flipper, emulating animation
 - [Refactor] Update to Kotlin 2.0

components/remote-controls/grid/saved/impl/src/main/kotlin/com/flipperdevices/remotecontrols/impl/grid/local/composable/LocalGridComposable.kt

@@ -66,13 +66,6 @@ fun LocalGridComposable(
                                 onCallback.invoke(LocalGridScreenDecomposeComponent.Callback.Deleted)
                             }
                         },
-                        onRemoteInfo = {
-                            onCallback.invoke(
-                                LocalGridScreenDecomposeComponent.Callback.ViewRemoteInfo(
-                                    loadedModel.keyPath
-                                )
-                            )
-                        },
                         onShare = onShare,
                         isEmulating = loadedModel.emulatedKey != null,
                         isConnected = loadedModel.isConnected

components/remote-controls/grid/saved/impl/src/main/kotlin/com/flipperdevices/remotecontrols/impl/grid/local/composable/components/ComposableRemoteDialogHowToUse.kt

@@ -0,0 +1,31 @@
+package com.flipperdevices.remotecontrols.impl.grid.local.composable.components
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import com.flipperdevices.core.ui.dialog.composable.FlipperDialog
+import com.flipperdevices.remotecontrols.grid.saved.impl.R
+
+@Composable
+internal fun ComposableRemoteDialogHowToUse(
+    isShowDialog: Boolean,
+    onClose: () -> Unit,
+) {
+    if (!isShowDialog) {
+        return
+    }
+
+    val imageId = if (MaterialTheme.colors.isLight) {
+        R.drawable.ir_flipper_format_light
+    } else {
+        R.drawable.ir_flipper_format_dark
+    }
+
+    FlipperDialog(
+        buttonTextId = R.string.rc_dialog_how_to_use_btn,
+        onClickButton = onClose,
+        onDismissRequest = onClose,
+        imageId = imageId,
+        titleId = R.string.rc_dialog_how_to_use_title,
+        textId = R.string.rc_dialog_how_to_use_text,
+    )
+}

components/remote-controls/grid/saved/impl/src/main/kotlin/com/flipperdevices/remotecontrols/impl/grid/local/composable/components/GridOptions.kt

@@ -36,14 +36,16 @@ import com.flipperdevices.core.ui.res.R as SharedRes
 @Composable
 @Suppress("LongMethod")
 internal fun ComposableInfraredDropDown(
-    onRemoteInfo: () -> Unit,
     onRename: () -> Unit,
     onShare: () -> Unit,
     onDelete: () -> Unit,
     isEmulating: Boolean,
     isConnected: Boolean,
     modifier: Modifier = Modifier,
 ) {
+    var isShowHowToUseDialog by remember { mutableStateOf(false) }
+    ComposableRemoteDialogHowToUse(isShowHowToUseDialog) { isShowHowToUseDialog = false }
+
     var isShowMoreOptions by remember { mutableStateOf(false) }
     val onChangeState = { isShowMoreOptions = !isShowMoreOptions }
     val isDropDownEnabled = isConnected && !isEmulating
@@ -75,10 +77,10 @@ internal fun ComposableInfraredDropDown(
             onDismissRequest = { isShowMoreOptions = false }
         ) {
             ComposableInfraredDropDownItem(
-                text = stringResource(R.string.option_remote_info),
+                text = stringResource(R.string.option_how_to_use),
                 painter = painterResource(R.drawable.ic_how_to_use),
                 onClick = {
-                    onRemoteInfo.invoke()
+                    isShowHowToUseDialog = !isShowHowToUseDialog
                     onChangeState.invoke()
                 }
             )