improve ui and ux

DatL4g · Nov 10, 2023 · 757f0b4 · 757f0b4
1 parent f04f11d
commit 757f0b4
Show file tree

Hide file tree

Showing 20 changed files with 466 additions and 107 deletions.
diff --git a/app/android/src/androidMain/AndroidManifest.xml b/app/android/src/androidMain/AndroidManifest.xml
@@ -2,22 +2,23 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <application
-        android:allowBackup="true"
-        android:icon="@mipmap/ic_launcher"
-        android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
-        android:supportsRtl="true"
-        android:theme="@style/Theme.AppCompat.Light.NoActionBar"
-    android:name=".App">
+            android:allowBackup="true"
+            android:icon="@mipmap/ic_launcher"
+            android:label="@string/app_name"
+            android:roundIcon="@mipmap/ic_launcher_round"
+            android:supportsRtl="true"
+            android:theme="@style/Theme.AppCompat.Light.NoActionBar"
+            android:name=".App"
+            android:enableOnBackInvokedCallback="true">
         <activity
-            android:exported="true"
-            android:configChanges="orientation|screenSize|screenLayout|keyboardHidden|mnc|colorMode|density|fontScale|fontWeightAdjustment|keyboard|layoutDirection|locale|mcc|navigation|smallestScreenSize|touchscreen|uiMode"
-            android:name=".MainActivity"
+                android:exported="true"
+                android:configChanges="orientation|screenSize|screenLayout|keyboardHidden|mnc|colorMode|density|fontScale|fontWeightAdjustment|keyboard|layoutDirection|locale|mcc|navigation|smallestScreenSize|touchscreen|uiMode"
+                android:name=".MainActivity"
         >
             <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
+                <action android:name="android.intent.action.MAIN"/>
 
-                <category android:name="android.intent.category.LAUNCHER" />
+                <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
         </activity>
     </application>

diff --git a/app/android/src/androidMain/kotlin/dev/datlag/burningseries/MainActivity.kt b/app/android/src/androidMain/kotlin/dev/datlag/burningseries/MainActivity.kt
@@ -7,6 +7,7 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.core.view.WindowCompat
 import com.arkivanov.decompose.DefaultComponentContext
+import com.arkivanov.essenty.backhandler.backHandler
 import com.arkivanov.essenty.lifecycle.Lifecycle
 import com.arkivanov.essenty.lifecycle.LifecycleOwner
 import com.arkivanov.essenty.lifecycle.essentyLifecycle
@@ -40,7 +41,8 @@ class MainActivity : AppCompatActivity() {
 
         val root = NavHostComponent(
             componentContext = DefaultComponentContext(
-                lifecycle = lifecycleOwner.lifecycle
+                lifecycle = lifecycleOwner.lifecycle,
+                backHandler = backHandler()
             ),
             di = di
         )

diff --git a/app/desktop/src/jvmMain/kotlin/dev/datlag/burningseries/Main.kt b/app/desktop/src/jvmMain/kotlin/dev/datlag/burningseries/Main.kt
@@ -1,10 +1,18 @@
 package dev.datlag.burningseries
 
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBackIosNew
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.window.WindowState
 import com.arkivanov.decompose.DefaultComponentContext
 import com.arkivanov.decompose.ExperimentalDecomposeApi
+import com.arkivanov.decompose.extensions.compose.jetbrains.PredictiveBackGestureIcon
+import com.arkivanov.decompose.extensions.compose.jetbrains.PredictiveBackGestureOverlay
 import com.arkivanov.decompose.extensions.compose.jetbrains.lifecycle.LifecycleController
+import com.arkivanov.essenty.backhandler.BackDispatcher
 import com.arkivanov.essenty.lifecycle.Lifecycle
 import com.arkivanov.essenty.lifecycle.LifecycleOwner
 import com.arkivanov.essenty.lifecycle.LifecycleRegistry
@@ -40,11 +48,15 @@ private fun runWindow() {
     val lifecycleOwner = object : LifecycleOwner {
         override val lifecycle: Lifecycle = lifecycle
     }
+    val backDispatcher = BackDispatcher()
     val di = DI {
         import(NetworkModule.di)
     }
     val root = NavHostComponent(
-        componentContext = DefaultComponentContext(lifecycle),
+        componentContext = DefaultComponentContext(
+            lifecycle,
+            backHandler = backDispatcher
+        ),
         di = di
     )
     val imageConfig = KamelConfig {
@@ -68,7 +80,20 @@ private fun runWindow() {
             LocalKamelConfig provides imageConfig
         ) {
             App(di) {
-                root.render()
+                PredictiveBackGestureOverlay(
+                    backDispatcher = backDispatcher,
+                    backIcon = { progress, _ ->
+                        PredictiveBackGestureIcon(
+                            imageVector = Icons.Default.ArrowBackIosNew,
+                            progress = progress,
+                            iconTintColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                            backgroundColor = MaterialTheme.colorScheme.secondaryContainer
+                        )
+                    },
+                    modifier = Modifier.fillMaxSize()
+                ) {
+                    root.render()
+                }
             }
         }
     }

diff --git a/...d/src/androidMain/kotlin/dev/datlag/burningseries/common/PlatformExtendCompose.android.kt b/...d/src/androidMain/kotlin/dev/datlag/burningseries/common/PlatformExtendCompose.android.kt
@@ -3,6 +3,12 @@ package dev.datlag.burningseries.common
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.ui.Modifier
+import com.arkivanov.decompose.ExperimentalDecomposeApi
+import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.StackAnimation
+import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.fade
+import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.predictiveBackAnimation
+import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.stackAnimation
+import com.arkivanov.essenty.backhandler.BackHandler
 
 @OptIn(ExperimentalFoundationApi::class)
 actual fun Modifier.onClick(
@@ -17,4 +23,14 @@ actual fun Modifier.onClick(
         onLongClick = onLongClick,
         onClick = onClick
     )
-}
+}
+
+@OptIn(ExperimentalDecomposeApi::class)
+actual fun <C : Any, T : Any> backAnimation(
+    backHandler: BackHandler,
+    onBack: () -> Unit
+): StackAnimation<C, T> = predictiveBackAnimation(
+    backHandler = backHandler,
+    animation = stackAnimation(fade()),
+    onBack = onBack
+)
diff --git a/...ed/src/androidMain/kotlin/dev/datlag/burningseries/ui/custom/VerticalScrollbar.android.kt b/...ed/src/androidMain/kotlin/dev/datlag/burningseries/ui/custom/VerticalScrollbar.android.kt
@@ -0,0 +1,31 @@
+package dev.datlag.burningseries.ui.custom
+
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+
+@Composable
+actual fun VerticalScrollbar(adapter: ScrollbarAdapter, modifier: Modifier) {
+}
+
+@Composable
+actual fun rememberScrollbarAdapter(
+    scrollState: LazyGridState,
+): ScrollbarAdapter = remember { object : ScrollbarAdapter {
+    override val scrollOffset: Double
+        get() = 0.0
+    override val contentSize: Double
+        get() = 0.0
+    override val viewportSize: Double
+        get() = 0.0
+
+    override suspend fun scrollTo(scrollOffset: Double) { }
+} }
+
+actual interface ScrollbarAdapter {
+    actual val scrollOffset: Double
+    actual val contentSize: Double
+    actual val viewportSize: Double
+    actual suspend fun scrollTo(scrollOffset: Double)
+}
diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/App.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/App.kt
@@ -11,6 +11,7 @@ import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
 import com.moriatsushi.insetsx.rememberWindowInsetsController
 import dev.datlag.burningseries.ui.theme.Colors
+import dev.datlag.burningseries.ui.theme.CommonSchemeTheme
 import dev.datlag.burningseries.ui.theme.toLegacyColors
 import dev.datlag.burningseries.ui.theme.toLegacyShapes
 import org.kodein.di.DI
@@ -43,12 +44,14 @@ fun App(
                 shapes = MaterialTheme.shapes.toLegacyShapes()
             ) {
                 SystemProvider {
-                    Surface(
-                        modifier = Modifier.fillMaxSize(),
-                        color = MaterialTheme.colorScheme.background,
-                        contentColor = MaterialTheme.colorScheme.onBackground
-                    ) {
-                        content()
+                    CommonSchemeTheme {
+                        Surface(
+                            modifier = Modifier.fillMaxSize(),
+                            color = MaterialTheme.colorScheme.background,
+                            contentColor = MaterialTheme.colorScheme.onBackground
+                        ) {
+                            content()
+                        }
                     }
                 }
             }

diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/common/PlatformExtendCompose.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/common/PlatformExtendCompose.kt
@@ -1,10 +1,18 @@
 package dev.datlag.burningseries.common
 
 import androidx.compose.ui.Modifier
+import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.StackAnimation
+import com.arkivanov.decompose.router.stack.StackNavigation
+import com.arkivanov.essenty.backhandler.BackHandler
 
 expect fun Modifier.onClick(
     enabled: Boolean = true,
     onDoubleClick: (() -> Unit)? = null,
     onLongClick: (() -> Unit)? = null,
     onClick: () -> Unit
-) : Modifier
+) : Modifier
+
+expect fun <C : Any, T : Any> backAnimation(
+    backHandler: BackHandler,
+    onBack: () -> Unit
+) : StackAnimation<C, T>
diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/ui/custom/VerticalScrollbar.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/ui/custom/VerticalScrollbar.kt
@@ -0,0 +1,21 @@
+package dev.datlag.burningseries.ui.custom
+
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+
+@Composable
+expect fun VerticalScrollbar(adapter: ScrollbarAdapter, modifier: Modifier = Modifier)
+
+@Composable
+expect fun rememberScrollbarAdapter(
+    scrollState: LazyGridState,
+): ScrollbarAdapter
+
+expect interface ScrollbarAdapter {
+    val scrollOffset: Double
+    val contentSize: Double
+    val viewportSize: Double
+    suspend fun scrollTo(scrollOffset: Double)
+}
diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/ui/navigation/NavHostComponent.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/ui/navigation/NavHostComponent.kt
@@ -2,11 +2,16 @@ package dev.datlag.burningseries.ui.navigation
 
 import androidx.compose.runtime.Composable
 import com.arkivanov.decompose.ComponentContext
+import com.arkivanov.decompose.ExperimentalDecomposeApi
 import com.arkivanov.decompose.extensions.compose.jetbrains.stack.Children
 import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.fade
+import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.predictiveBackAnimation
 import com.arkivanov.decompose.extensions.compose.jetbrains.stack.animation.stackAnimation
 import com.arkivanov.decompose.router.stack.StackNavigation
 import com.arkivanov.decompose.router.stack.childStack
+import com.arkivanov.decompose.router.stack.pop
+import com.arkivanov.essenty.backhandler.BackHandlerOwner
+import dev.datlag.burningseries.common.backAnimation
 import dev.datlag.burningseries.ui.screen.initial.InitialScreenComponent
 import org.kodein.di.DI
 
@@ -38,7 +43,12 @@ class NavHostComponent(
     override fun render() {
         Children(
             stack = stack,
-            animation = stackAnimation(fade())
+            animation = backAnimation(
+                backHandler = this.backHandler,
+                onBack = {
+                    navigation.pop()
+                }
+            )
         ) {
             it.instance.render()
         }

diff --git a/...hared/src/commonMain/kotlin/dev/datlag/burningseries/ui/screen/initial/home/HomeScreen.kt b/...hared/src/commonMain/kotlin/dev/datlag/burningseries/ui/screen/initial/home/HomeScreen.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -27,6 +28,8 @@ import dev.datlag.burningseries.common.lifecycle.collectAsStateWithLifecycle
 import dev.datlag.burningseries.model.Home
 import dev.datlag.burningseries.model.state.HomeState
 import dev.datlag.burningseries.shared.SharedRes
+import dev.datlag.burningseries.ui.custom.VerticalScrollbar
+import dev.datlag.burningseries.ui.custom.rememberScrollbarAdapter
 import dev.datlag.burningseries.ui.custom.state.ErrorState
 import dev.datlag.burningseries.ui.custom.state.LoadingState
 import dev.datlag.burningseries.ui.screen.initial.home.component.EpisodeItem
@@ -91,42 +94,52 @@ private fun ExpandedView(home: Home, component: HomeComponent) {
 
 @Composable
 private fun MainView(home: Home, component: HomeComponent, modifier: Modifier = Modifier) {
-    LazyVerticalGrid(
-        columns = GridCells.Adaptive(400.dp),
+    Row(
         modifier = modifier.padding(horizontal = 16.dp),
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-        horizontalArrangement = Arrangement.spacedBy(8.dp)
+        horizontalArrangement = Arrangement.spacedBy(2.dp)
     ) {
-        header {
-            Text(
-                text = stringResource(SharedRes.strings.newest_episodes),
-                style = MaterialTheme.typography.headlineLarge,
-                fontWeight = FontWeight.Bold
-            )
-        }
-        items(home.episodes, key = {
-            it.href
-        }) { episode ->
-            EpisodeItem(episode) {
-                component.itemClicked(HomeConfig.Series(episode))
+        val state = rememberLazyGridState()
+
+        LazyVerticalGrid(
+            columns = GridCells.Adaptive(400.dp),
+            modifier = Modifier.weight(1F),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            state = state
+        ) {
+            header {
+                Text(
+                    modifier = Modifier.padding(top = 16.dp),
+                    text = stringResource(SharedRes.strings.newest_episodes),
+                    style = MaterialTheme.typography.headlineLarge,
+                    fontWeight = FontWeight.Bold
+                )
             }
-        }
-        header {
-            Spacer(modifier = Modifier.size(48.dp))
-        }
-        header {
-            Text(
-                text = stringResource(SharedRes.strings.newest_series),
-                style = MaterialTheme.typography.headlineLarge,
-                fontWeight = FontWeight.Bold
-            )
-        }
-        items(home.series, key = {
-            it.href
-        }) { series ->
-            SeriesItem(series) {
-                component.itemClicked(HomeConfig.Series(series))
+            items(home.episodes, key = {
+                it.href
+            }) { episode ->
+                EpisodeItem(episode) {
+                    component.itemClicked(HomeConfig.Series(episode))
+                }
+            }
+            header {
+                Spacer(modifier = Modifier.size(48.dp))
+            }
+            header {
+                Text(
+                    text = stringResource(SharedRes.strings.newest_series),
+                    style = MaterialTheme.typography.headlineLarge,
+                    fontWeight = FontWeight.Bold
+                )
+            }
+            items(home.series, key = {
+                it.href
+            }) { series ->
+                SeriesItem(series) {
+                    component.itemClicked(HomeConfig.Series(series))
+                }
             }
         }
+        VerticalScrollbar(rememberScrollbarAdapter(state))
     }
 }
diff --git a/.../commonMain/kotlin/dev/datlag/burningseries/ui/screen/initial/home/HomeScreenComponent.kt b/.../commonMain/kotlin/dev/datlag/burningseries/ui/screen/initial/home/HomeScreenComponent.kt
@@ -28,7 +28,7 @@ class HomeScreenComponent(
     private val navigation = SlotNavigation<HomeConfig>()
     override val child: Value<ChildSlot<*, Component>> = childSlot(
         source = navigation,
-        handleBackButton = true
+        handleBackButton = false
     ) { config, context ->
         when (config) {
             is HomeConfig.Series -> SeriesScreenComponent(