From 7f234a0ba17b1718df2a4a6d7cf6ad90e88d2b86 Mon Sep 17 00:00:00 2001
From: Acclorite <2ma0bhpk@anonaddy.com>
Date: Sat, 27 Dec 2025 14:02:50 +0200
Subject: [PATCH] feat: improve navigator bottom sheet design

* Added icons
* Aligned to the left

Co-authored-by: Edward205 <52004020+Edward205@users.noreply.github.com>
---
 .../ui/navigator/NavigatorBottomSheet.kt      | 26 ++++++++++---------
 .../ui/navigator/NavigatorBottomSheetItem.kt  | 19 +++++++++++---
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheet.kt b/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheet.kt
index 4078b1b0..e652427e 100644
--- a/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheet.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheet.kt
@@ -6,10 +6,13 @@
 
 package ua.acclorite.book_story.ui.navigator
 
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.outlined.Info
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -32,25 +35,28 @@ fun NavigatorBottomSheet() {
         onDismissRequest = { navigatorBottomSheetChannel.trySend(false) },
         sheetGesturesEnabled = true
     ) {
-        LazyColumn(modifier = Modifier.fillMaxWidth()) {
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 8.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
             item {
                 NavigatorBottomSheetItem(
                     title = stringResource(id = R.string.about_screen),
+                    imageVector = Icons.Outlined.Info,
                     primary = false,
-                    position = Position.TOP
+                    position = Position.SOLO
                 ) {
                     navigator.push(AboutScreen)
                     navigatorBottomSheetChannel.trySend(false)
                 }
             }
 
-            item {
-                Spacer(Modifier.height(18.dp))
-            }
-
             item {
                 NavigatorBottomSheetItem(
                     title = stringResource(id = R.string.settings_screen),
+                    imageVector = Icons.Default.Settings,
                     primary = true,
                     position = Position.SOLO
                 ) {
@@ -58,10 +64,6 @@ fun NavigatorBottomSheet() {
                     navigatorBottomSheetChannel.trySend(false)
                 }
             }
-
-            item {
-                Spacer(modifier = Modifier.height(8.dp))
-            }
         }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheetItem.kt b/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheetItem.kt
index b728b759..91e3d589 100644
--- a/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheetItem.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheetItem.kt
@@ -8,18 +8,22 @@ package ua.acclorite.book_story.ui.navigator
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.ui.common.components.common.StyledText
 import ua.acclorite.book_story.ui.common.model.Position
@@ -27,6 +31,7 @@ import ua.acclorite.book_story.ui.common.model.Position
 @Composable
 fun NavigatorBottomSheetItem(
     title: String,
+    imageVector: ImageVector,
     primary: Boolean,
     position: Position,
     onClick: () -> Unit
@@ -58,7 +63,7 @@ fun NavigatorBottomSheetItem(
         }
     }
 
-    Box(
+    Row(
         modifier = Modifier
             .padding(paddingValues)
             .fillMaxWidth()
@@ -72,8 +77,16 @@ fun NavigatorBottomSheetItem(
                 onClick()
             }
             .padding(horizontal = 18.dp, vertical = 18.dp),
-        contentAlignment = Alignment.Center
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(18.dp)
     ) {
+        Icon(
+            imageVector = imageVector,
+            contentDescription = null,
+            modifier = Modifier.size(24.dp),
+            tint = if (primary) MaterialTheme.colorScheme.onPrimaryContainer
+            else MaterialTheme.colorScheme.onSurface
+        )
         StyledText(
             text = title,
             style = MaterialTheme.typography.labelLarge.copy(