Fix systembar borders & add back reader settings

Signed-off-by: starry-shivam <[email protected]>

app/build.gradle

@@ -93,7 +93,7 @@ aboutLibraries {
 
 
 dependencies {
-    def composeBom = platform('androidx.compose:compose-bom:2024.09.02')
+    def composeBom = platform('androidx.compose:compose-bom:2024.09.03')
     implementation composeBom
     androidTestImplementation composeBom
 
@@ -111,7 +111,7 @@ dependencies {
     implementation "androidx.compose.runtime:runtime-livedata"
     implementation "androidx.compose.material3:material3"
     // Material icons.
-    implementation 'androidx.compose.material:material-icons-extended:1.7.2'
+    implementation 'androidx.compose.material:material-icons-extended:1.7.3'
     // Material theme for main activity.
     implementation 'com.google.android.material:material:1.12.0'
     // Android 12+ splash API.

app/src/main/AndroidManifest.xml

@@ -39,7 +39,8 @@
         <activity
             android:name=".ui.screens.reader.main.activities.ReaderActivity"
             android:configChanges="orientation|screenSize|uiMode|locale|layoutDirection|screenLayout"
-            android:exported="true">
+            android:exported="true"
+            android:theme="@style/Theme.Myne.ReaderActivity">
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
                 <category android:name="android.intent.category.DEFAULT" />

app/src/main/java/com/starry/myne/ui/common/CustomBottomSheet.kt

@@ -0,0 +1,71 @@
+package com.starry.myne.ui.common
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.material3.BottomSheetDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Dp
+
+/**
+ * Custom Bottom Sheet. Fixes bugs with [ModalBottomSheet].
+ *
+ * @param modifier [Modifier].
+ * @param hasFixedHeight Whether the bottom sheet has fixed height passed through [modifier] or not.
+ * @param scrimColor Scrim color.
+ * @param shape Shape.
+ * @param containerColor Container color.
+ * @param onDismissRequest OnDismiss callback.
+ * @param dragHandle Drag Handle, pass null to disable.
+ * @param content Content inside [ModalBottomSheet]. Provides you navigation bar padding.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun CustomBottomSheet(
+    modifier: Modifier = Modifier,
+    hasFixedHeight: Boolean = false,
+    scrimColor: Color = BottomSheetDefaults.ScrimColor,
+    shape: Shape = BottomSheetDefaults.ExpandedShape,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceContainerLow,
+    onDismissRequest: () -> Unit,
+    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
+    content: @Composable ColumnScope.(navigationBarPadding: Dp) -> Unit
+) {
+    val navigationBarPadding =
+        WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
+
+    Box(Modifier.fillMaxSize()) {
+        ModalBottomSheet(
+            scrimColor = scrimColor,
+            dragHandle = dragHandle,
+            modifier = Modifier
+                .then(
+                    if (hasFixedHeight) Modifier.align(Alignment.BottomCenter)
+                    else Modifier
+                )
+                .fillMaxWidth()
+                .then(modifier),
+            onDismissRequest = {
+                onDismissRequest()
+            },
+            shape = shape,
+            sheetState = rememberModalBottomSheetState(true),
+            contentWindowInsets = { WindowInsets(0, 0, 0, 0) },
+            containerColor = containerColor
+        ) {
+            content(navigationBarPadding)
+        }
+    }
+}

app/src/main/java/com/starry/myne/ui/screens/main/MainScreen.kt

@@ -79,7 +79,8 @@ fun MainScreen(
     Scaffold(
         bottomBar = {
             BottomBar(navController = navController)
-        }, containerColor = MaterialTheme.colorScheme.background
+        },
+        containerColor = MaterialTheme.colorScheme.background,
     ) {
         NavGraph(
             startDestination = startDestination,

app/src/main/java/com/starry/myne/ui/screens/reader/main/activities/ReaderActivity.kt

@@ -116,11 +116,13 @@ class ReaderActivity : AppCompatActivity() {
                         ChaptersContent(
                             state = state,
                             lazyListState = lazyListState,
-                            onToggleReaderMenu = {
-                                viewModel.toggleReaderMenu()
-                                toggleSystemBars(state.showReaderMenu)
-                            }
+                            onToggleReaderMenu = { viewModel.toggleReaderMenu() }
                         )
+
+                        // Toggle system bars based on reader menu visibility.
+                        LaunchedEffect(state.showReaderMenu) {
+                            toggleSystemBars(state.showReaderMenu)
+                        }
                     })
             }
         }

app/src/main/java/com/starry/myne/ui/screens/reader/main/composables/ChaptersContent.kt

@@ -93,7 +93,10 @@ private fun ChapterLazyItemItem(
     val context = LocalContext.current
     val paragraphs = remember { chunkText(chapter.body) }
 
-    val targetFontSize = (state.fontSize / 10) * 1.8f
+    val targetFontSize = remember(state.fontSize) {
+        (state.fontSize / 10) * 1.8f
+    }
+
     val fontSize by animateFloatAsState(
         targetValue = targetFontSize,
         animationSpec = tween(durationMillis = 300),