From d23afedb6e2de2377d8a72fc6be9c3a6fd564756 Mon Sep 17 00:00:00 2001 From: knighthat Date: Mon, 7 Oct 2024 11:09:36 -0500 Subject: [PATCH 1/3] move cursor to the end of search input --- .../rimusic/ui/screens/home/HomeLibraryModern.kt | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt b/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt index 1f70a2d60a..db814e7753 100644 --- a/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt +++ b/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt @@ -59,10 +59,13 @@ import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.platform.LocalSoftwareKeyboardController import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextRange import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.text.input.TextFieldValue import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import androidx.media3.common.util.UnstableApi +import androidx.room.util.copy import com.github.doyaaaaaken.kotlincsv.dsl.csvReader import it.fast4x.compose.persist.persistList import it.fast4x.rimusic.Database @@ -590,9 +593,15 @@ fun HomeLibraryModern( focusRequester.requestFocus() } + var searchInput by remember { mutableStateOf( TextFieldValue( filter ?: "" ) ) } BasicTextField( - value = filter ?: "", - onValueChange = { filter = it }, + value = searchInput, + onValueChange = { + searchInput = it.copy( + selection = TextRange( it.text.length ) + ) + filter = it.text + }, textStyle = typography().xs.semiBold, singleLine = true, maxLines = 1, From a868dc85fb1dd4f73dac485939ecba8245c30f64 Mon Sep 17 00:00:00 2001 From: knighthat Date: Mon, 7 Oct 2024 11:24:38 -0500 Subject: [PATCH 2/3] remove possible null value from filter --- .../ui/screens/home/HomeLibraryModern.kt | 37 +++---------------- 1 file changed, 6 insertions(+), 31 deletions(-) diff --git a/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt b/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt index db814e7753..c687e437f8 100644 --- a/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt +++ b/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt @@ -197,7 +197,7 @@ fun HomeLibraryModern( var sortOrder by rememberEncryptedPreference(pipedApiTokenKey, SortOrder.Descending) var searching by rememberSaveable { mutableStateOf(false) } - var filter: String? by rememberSaveable { mutableStateOf(null) } + var filter by rememberSaveable { mutableStateOf("") } var items by persistList("home/playlists") @@ -205,13 +205,10 @@ fun HomeLibraryModern( Database.playlistPreviews(sortBy, sortOrder).collect { items = it } } - val filterCharSequence: CharSequence - filterCharSequence = filter.toString() - //Log.d("mediaItemFilter", "<${filter}> <${filterCharSequence}>") - if (!filter.isNullOrBlank()) + if ( filter.isNotBlank() ) items = items .filter { - it.playlist.name.contains(filterCharSequence, true) + it.playlist.name.contains( filter, true) } val sortOrderIconRotation by animateFloatAsState( @@ -587,13 +584,12 @@ fun HomeLibraryModern( AnimatedVisibility(visible = searching) { val focusRequester = remember { FocusRequester() } val focusManager = LocalFocusManager.current - val keyboardController = LocalSoftwareKeyboardController.current LaunchedEffect(searching) { focusRequester.requestFocus() } - var searchInput by remember { mutableStateOf( TextFieldValue( filter ?: "" ) ) } + var searchInput by remember { mutableStateOf( TextFieldValue( filter ) ) } BasicTextField( value = searchInput, onValueChange = { @@ -607,8 +603,8 @@ fun HomeLibraryModern( maxLines = 1, keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done), keyboardActions = KeyboardActions(onDone = { - if (filter.isNullOrBlank()) filter = "" focusManager.clearFocus() + searching = filter.isNotBlank() }), cursorBrush = SolidColor(colorPalette().text), decorationBox = { innerTextField -> @@ -634,7 +630,7 @@ fun HomeLibraryModern( .padding(horizontal = 30.dp) ) { androidx.compose.animation.AnimatedVisibility( - visible = filter?.isEmpty() ?: true, + visible = filter.isBlank(), enter = fadeIn(tween(100)), exit = fadeOut(tween(100)), ) { @@ -657,30 +653,9 @@ fun HomeLibraryModern( shape = thumbnailRoundness.shape() ) .focusRequester(focusRequester) - .onFocusChanged { - if (!it.hasFocus) { - keyboardController?.hide() - if (filter?.isBlank() == true) { - filter = null - searching = false - } - } - } ) } - /* - else { - HeaderIconButton( - onClick = { searching = true }, - icon = R.drawable.search_circle, - color = colorPalette().text, - iconSize = 24.dp - ) - } - - */ } - /* */ } item( From 17c12cc71be5a88ec9b90f3f63aa9612119a8f94 Mon Sep 17 00:00:00 2001 From: knighthat Date: Mon, 7 Oct 2024 11:50:33 -0500 Subject: [PATCH 3/3] improve UX with show/hide focus/unfocus search input bar --- .../ui/screens/home/HomeLibraryModern.kt | 50 ++++++++++++++++--- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt b/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt index c687e437f8..ddcce93c49 100644 --- a/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt +++ b/composeApp/src/androidMain/kotlin/it/fast4x/rimusic/ui/screens/home/HomeLibraryModern.kt @@ -197,6 +197,7 @@ fun HomeLibraryModern( var sortOrder by rememberEncryptedPreference(pipedApiTokenKey, SortOrder.Descending) var searching by rememberSaveable { mutableStateOf(false) } + var isSearchInputFocused by rememberSaveable { mutableStateOf( false ) } var filter by rememberSaveable { mutableStateOf("") } var items by persistList("home/playlists") @@ -208,7 +209,7 @@ fun HomeLibraryModern( if ( filter.isNotBlank() ) items = items .filter { - it.playlist.name.contains( filter, true) + it.playlist.name.contains( filter, true ) } val sortOrderIconRotation by animateFloatAsState( @@ -428,7 +429,10 @@ fun HomeLibraryModern( ) HeaderIconButton( - onClick = { searching = !searching }, + onClick = { + searching = !searching + isSearchInputFocused = searching + }, icon = R.drawable.search_circle, color = colorPalette().text, iconSize = 24.dp, @@ -586,7 +590,7 @@ fun HomeLibraryModern( val focusManager = LocalFocusManager.current LaunchedEffect(searching) { - focusRequester.requestFocus() + if( isSearchInputFocused ) focusRequester.requestFocus() } var searchInput by remember { mutableStateOf( TextFieldValue( filter ) ) } @@ -687,7 +691,15 @@ fun HomeLibraryModern( thumbnailSizePx = thumbnailSizePx, alternative = true, modifier = Modifier - .clickable(onClick = { onPlaylistClick(playlistPreview.playlist) }) + .clickable(onClick = { + onPlaylistClick(playlistPreview.playlist) + + if( searching ) + if( filter.isBlank() ) + searching = false + else + isSearchInputFocused = false + }) .animateItem(fadeInSpec = null, fadeOutSpec = null) .fillMaxSize() ) @@ -704,7 +716,15 @@ fun HomeLibraryModern( thumbnailSizePx = thumbnailSizePx, alternative = true, modifier = Modifier - .clickable(onClick = { onPlaylistClick(playlistPreview.playlist) }) + .clickable(onClick = { + onPlaylistClick(playlistPreview.playlist) + + if( searching ) + if( filter.isBlank() ) + searching = false + else + isSearchInputFocused = false + }) .animateItem(fadeInSpec = null, fadeOutSpec = null) .fillMaxSize() ) @@ -720,7 +740,15 @@ fun HomeLibraryModern( thumbnailSizePx = thumbnailSizePx, alternative = true, modifier = Modifier - .clickable(onClick = { onPlaylistClick(playlistPreview.playlist) }) + .clickable(onClick = { + onPlaylistClick(playlistPreview.playlist) + + if( searching ) + if( filter.isBlank() ) + searching = false + else + isSearchInputFocused = false + }) .animateItem(fadeInSpec = null, fadeOutSpec = null) .fillMaxSize() ) @@ -736,7 +764,15 @@ fun HomeLibraryModern( thumbnailSizePx = thumbnailSizePx, alternative = true, modifier = Modifier - .clickable(onClick = { onPlaylistClick(playlistPreview.playlist) }) + .clickable(onClick = { + onPlaylistClick(playlistPreview.playlist) + + if( searching ) + if( filter.isBlank() ) + searching = false + else + isSearchInputFocused = false + }) .animateItem(fadeInSpec = null, fadeOutSpec = null) .fillMaxSize() )