feat(ui): Integrate liquid navigation effect across screens

This commit integrates the `liquid` library to create a "liquefiable" effect between the bottom navigation bar and the content of several feature screens. This adds a fluid, connected animation when interacting with the navigation.

- **feat(ui)**: Added the `liquid` library dependency to the `apps`, `search`, and `settings` presentation modules.
- **feat(search, settings)**: Applied the `liquefiable` modifier to the `Scaffold` of the Search and Settings screens, linking them to the bottom navigation's liquid state.
- **feat(search)**: Also applied the `liquefiable` modifier to the search results list and its items to ensure they participate in the liquid effect.

Author: rainxchzed

feature/apps/presentation/build.gradle.kts

@@ -16,6 +16,7 @@ kotlin {
                 implementation(compose.components.resources)
 
                 implementation(libs.bundles.landscapist)
+                implementation(libs.liquid)
             }
         }
 

feature/apps/presentation/src/commonMain/kotlin/zed/rainxch/apps/presentation/AppsRoot.kt

@@ -57,6 +57,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.skydoves.landscapist.coil3.CoilImage
+import io.github.fletchmckee.liquid.liquefiable
 import zed.rainxch.githubstore.core.presentation.res.*
 import kotlinx.coroutines.launch
 import org.jetbrains.compose.resources.stringResource
@@ -65,6 +66,7 @@ import org.koin.compose.viewmodel.koinViewModel
 import zed.rainxch.apps.presentation.model.AppItem
 import zed.rainxch.apps.presentation.model.UpdateAllProgress
 import zed.rainxch.apps.presentation.model.UpdateState
+import zed.rainxch.core.presentation.locals.LocalBottomNavigationLiquid
 import zed.rainxch.core.presentation.theme.GithubStoreTheme
 import zed.rainxch.core.presentation.utils.ObserveAsEvents
 
@@ -121,6 +123,7 @@ fun AppsScreen(
     onAction: (AppsAction) -> Unit,
     snackbarHostState: SnackbarHostState
 ) {
+    val liquidState = LocalBottomNavigationLiquid.current
     Scaffold(
         topBar = {
             TopAppBar(
@@ -156,12 +159,14 @@ fun AppsScreen(
         },
         snackbarHost = {
             SnackbarHost(snackbarHostState)
-        }
+        },
+        modifier = Modifier.liquefiable(liquidState)
     ) { innerPadding ->
         Column(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(innerPadding)
+                .liquefiable(liquidState)
         ) {
             TextField(
                 value = state.searchQuery,
@@ -260,7 +265,8 @@ fun AppsScreen(
                                 onOpenClick = { onAction(AppsAction.OnOpenApp(appItem.installedApp)) },
                                 onUpdateClick = { onAction(AppsAction.OnUpdateApp(appItem.installedApp)) },
                                 onCancelClick = { onAction(AppsAction.OnCancelUpdate(appItem.installedApp.packageName)) },
-                                onRepoClick = { onAction(AppsAction.OnNavigateToRepo(appItem.installedApp.repoId)) }
+                                onRepoClick = { onAction(AppsAction.OnNavigateToRepo(appItem.installedApp.repoId)) },
+                                modifier = Modifier.liquefiable(liquidState)
                             )
                         }
                     }
@@ -331,12 +337,13 @@ fun AppItemCard(
     onOpenClick: () -> Unit,
     onUpdateClick: () -> Unit,
     onCancelClick: () -> Unit,
-    onRepoClick: () -> Unit
+    onRepoClick: () -> Unit,
+    modifier: Modifier = Modifier
 ) {
     val app = appItem.installedApp
 
     Card(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = modifier.fillMaxWidth(),
         onClick = onRepoClick
     ) {
         Column(

feature/search/presentation/build.gradle.kts

@@ -12,6 +12,8 @@ kotlin {
                 implementation(projects.core.presentation)
                 implementation(projects.feature.search.domain)
 
+                implementation(libs.liquid)
+
                 implementation(compose.components.uiToolingPreview)
                 implementation(compose.components.resources)
             }

feature/search/presentation/src/commonMain/kotlin/zed/rainxch/search/presentation/SearchRoot.kt

@@ -57,13 +57,15 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import io.github.fletchmckee.liquid.liquefiable
 import zed.rainxch.githubstore.core.presentation.res.*
 import kotlinx.coroutines.delay
 import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import org.koin.compose.viewmodel.koinViewModel
 import zed.rainxch.core.domain.model.GithubRepoSummary
 import zed.rainxch.core.presentation.components.RepositoryCard
+import zed.rainxch.core.presentation.locals.LocalBottomNavigationLiquid
 import zed.rainxch.core.presentation.theme.GithubStoreTheme
 import zed.rainxch.domain.model.ProgrammingLanguage
 import zed.rainxch.domain.model.SearchPlatform
@@ -124,6 +126,7 @@ fun SearchScreen(
 ) {
     val focusRequester = remember { FocusRequester() }
     val listState = rememberLazyStaggeredGridState()
+    val liquidState = LocalBottomNavigationLiquid.current
 
     val shouldLoadMore by remember {
         derivedStateOf {
@@ -187,14 +190,15 @@ fun SearchScreen(
     }
 
     Scaffold(
-        containerColor = MaterialTheme.colorScheme.background,
         topBar = {
             SearchTopbar(
                 onAction = onAction,
                 state = state,
                 focusRequester = focusRequester
             )
-        }
+        },
+        containerColor = MaterialTheme.colorScheme.background,
+        modifier = Modifier.liquefiable(liquidState)
     ) { innerPadding ->
         Column(
             modifier = Modifier
@@ -334,7 +338,9 @@ fun SearchScreen(
                         verticalItemSpacing = 12.dp,
                         horizontalArrangement = Arrangement.spacedBy(12.dp),
                         contentPadding = PaddingValues(horizontal = 8.dp, vertical = 12.dp),
-                        modifier = Modifier.fillMaxSize()
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .liquefiable(liquidState)
                     ) {
                         items(
                             items = state.repositories,
@@ -348,7 +354,9 @@ fun SearchScreen(
                                 onDeveloperClick = { username ->
                                     onAction(SearchAction.OnRepositoryDeveloperClick(username))
                                 },
-                                modifier = Modifier.animateItem()
+                                modifier = Modifier
+                                    .animateItem()
+                                    .liquefiable(liquidState)
                             )
                         }
 

feature/settings/presentation/build.gradle.kts

@@ -14,6 +14,8 @@ kotlin {
 
                 implementation(compose.components.uiToolingPreview)
                 implementation(compose.components.resources)
+
+                implementation(libs.liquid)
             }
         }
 

feature/settings/presentation/src/commonMain/kotlin/zed/rainxch/settings/presentation/SettingsRoot.kt

@@ -27,13 +27,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import io.github.fletchmckee.liquid.liquefiable
 import zed.rainxch.githubstore.core.presentation.res.*
 import kotlinx.coroutines.launch
 import org.jetbrains.compose.resources.getString
 import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import org.koin.compose.viewmodel.koinViewModel
 import zed.rainxch.core.domain.model.FontTheme
+import zed.rainxch.core.presentation.locals.LocalBottomNavigationLiquid
 import zed.rainxch.core.presentation.theme.GithubStoreTheme
 import zed.rainxch.core.presentation.utils.ObserveAsEvents
 import zed.rainxch.settings.presentation.components.LogoutDialog
@@ -103,14 +105,16 @@ fun SettingsScreen(
     onAction: (SettingsAction) -> Unit,
     snackbarState: SnackbarHostState
 ) {
+    val liquidState = LocalBottomNavigationLiquid.current
     Scaffold(
         snackbarHost = {
             SnackbarHost(hostState = snackbarState)
         },
         topBar = {
             TopAppBar(onAction)
         },
-        containerColor = MaterialTheme.colorScheme.background
+        containerColor = MaterialTheme.colorScheme.background,
+        modifier = Modifier.liquefiable(liquidState)
     ) { innerPadding ->
         LazyColumn(
             modifier = Modifier