feat: redesign PoemScreen

app/src/main/java/ir/jaamebaade/jaamebaade_client/AppNavHost.kt

@@ -42,10 +42,10 @@ import ir.jaamebaade.jaamebaade_client.view.DownloadablePoetsScreen
 import ir.jaamebaade.jaamebaade_client.view.DownloadedPoetsScreen
 import ir.jaamebaade.jaamebaade_client.view.FavoritesScreen
 import ir.jaamebaade.jaamebaade_client.view.HistoryScreen
+import ir.jaamebaade.jaamebaade_client.view.PoemScreen
 import ir.jaamebaade.jaamebaade_client.view.PoetCategoryPoemScreen
 import ir.jaamebaade.jaamebaade_client.view.SearchScreen
 import ir.jaamebaade.jaamebaade_client.view.SettingsScreen
-import ir.jaamebaade.jaamebaade_client.view.VerseScreen
 import ir.jaamebaade.jaamebaade_client.view.components.AboutUsScreen
 import ir.jaamebaade.jaamebaade_client.view.components.Navbar
 import ir.jaamebaade.jaamebaade_client.view.components.TopBar
@@ -185,7 +185,7 @@ fun AppNavHost(fontRepository: FontRepository, themeRepository: ThemeRepository)
                         val verseId = backStackEntry.arguments?.getInt("verseId")
                             ?.let { if (it == -1) null else it }
 
-                        VerseScreen(
+                        PoemScreen(
                             navController,
                             poemId = poemId!!,
                             poetId = poetId!!,

app/src/main/java/ir/jaamebaade/jaamebaade_client/model/VersePoemCategoriesPoet.kt

@@ -10,6 +10,11 @@ data class VersePoemCategoriesPoet(
     val poet: Poet
 )
 
-fun VersePoemCategoriesPoet.toPathHeaderText() = "${
-    categories.joinToString(separator = " > ") { it.text }
-} > ${poem.title}"
+fun VersePoemCategoriesPoet.toPathHeaderText(includePoemTitle: Boolean = true): String {
+    val categoryPath = categories.joinToString(separator = " > ") { it.text }
+    return if (includePoemTitle) {
+        "$categoryPath > ${poem.title}"
+    } else {
+        categoryPath
+    }
+}

app/src/main/java/ir/jaamebaade/jaamebaade_client/view/VersesScreen.kt → app/src/main/java/ir/jaamebaade/jaamebaade_client/view/PoemScreen.kt

@@ -7,9 +7,7 @@ import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -29,20 +27,21 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.text.AnnotatedString
-import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavController
 import ir.jaamebaade.jaamebaade_client.model.Status
+import ir.jaamebaade.jaamebaade_client.model.VersePoemCategoriesPoet
 import ir.jaamebaade.jaamebaade_client.model.VerseWithHighlights
 import ir.jaamebaade.jaamebaade_client.view.components.RoundButton
 import ir.jaamebaade.jaamebaade_client.view.components.VerseItem
-import ir.jaamebaade.jaamebaade_client.view.components.VersePageHeader
+import ir.jaamebaade.jaamebaade_client.view.components.PoemScreenHeader
+import ir.jaamebaade.jaamebaade_client.view.components.PoemScreenPathHeader
 import ir.jaamebaade.jaamebaade_client.viewmodel.AudioViewModel
 import ir.jaamebaade.jaamebaade_client.viewmodel.VersesViewModel
 import kotlinx.coroutines.delay
 
 @Composable
-fun VerseScreen(
+fun PoemScreen(
     navController: NavController,
     poemId: Int,
     poetId: Int,
@@ -51,8 +50,8 @@ fun VerseScreen(
     audioViewModel: AudioViewModel = hiltViewModel()
 ) {
 
-    var poetName by remember(poetId) {
-        mutableStateOf("")
+    var path by remember(poemId) {
+        mutableStateOf<VersePoemCategoriesPoet?>(null)
     }
 
     var poemTitle by remember(poemId) {
@@ -102,7 +101,7 @@ fun VerseScreen(
     }
 
     LaunchedEffect(poetId) {
-        poetName = versesViewModel.getPoetName(poetId)
+        path = versesViewModel.getPoemPath(poemId)
         val categoryId = versesViewModel.getCategoryIdByPoemId(poemId)
         val minMaxPair = versesViewModel.getFirstAndLastWithCategoryId(categoryId)
         minId = minMaxPair.first
@@ -151,12 +150,19 @@ fun VerseScreen(
     Column(
         modifier = modifier
     ) {
-        VersePageHeader(
+        PoemScreenPathHeader(
             navController = navController,
             poetId = poetId,
             poemId = poemId,
             minId = minId,
             maxId = maxId,
+            path = path,
+        )
+
+        PoemScreenHeader(
+            navController = navController,
+            poetId = poetId,
+            poemId = poemId,
             versesViewModel = versesViewModel,
             showVerseNumbers = showVerseNumbers,
             selectMode = selectMode,
@@ -168,10 +174,6 @@ fun VerseScreen(
             },
         )
 
-        Spacer(modifier = Modifier.width(200.dp))
-
-        Spacer(modifier = Modifier.width(200.dp))
-
         LazyColumn(state = lazyListState) {
             itemsIndexed(versesWithHighlights) { index, verseWithHighlights ->
                 val isSelected = selectedVerses.contains(verseWithHighlights)

app/src/main/java/ir/jaamebaade/jaamebaade_client/view/components/AudioMenu.kt

@@ -42,7 +42,7 @@ fun AudioMenu(viewModel: VersesViewModel, audioViewModel: AudioViewModel) {
 
     Box(
         modifier = Modifier
-            .size(28.dp)
+            .size(24.dp)
     ) {
         IconButton(onClick = {
             expanded = true

app/src/main/java/ir/jaamebaade/jaamebaade_client/view/components/PoemScreenHeader.kt

@@ -0,0 +1,132 @@
+package ir.jaamebaade.jaamebaade_client.view.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.outlined.Comment
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Share
+import androidx.compose.material.icons.outlined.Cancel
+import androidx.compose.material.icons.outlined.FavoriteBorder
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import ir.jaamebaade.jaamebaade_client.R
+import ir.jaamebaade.jaamebaade_client.constants.AppRoutes
+import ir.jaamebaade.jaamebaade_client.viewmodel.AudioViewModel
+import ir.jaamebaade.jaamebaade_client.viewmodel.VersesViewModel
+
+@Composable
+fun PoemScreenHeader(
+    navController: NavController,
+    poetId: Int,
+    poemId: Int,
+    modifier: Modifier = Modifier,
+    versesViewModel: VersesViewModel,
+    showVerseNumbers: Boolean,
+    selectMode: Boolean,
+    audioViewModel: AudioViewModel,
+    onToggleVerseNumbers: () -> Unit,
+    onToggleSelectMode: () -> Unit
+) {
+    val isBookmarked by versesViewModel.isBookmarked.collectAsState()
+
+    val context = LocalContext.current
+    var expanded by remember { mutableStateOf(false) }
+    Column {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(vertical = 8.dp, horizontal = 6.dp)
+        ) {
+            AudioMenu(versesViewModel, audioViewModel = audioViewModel)
+            IconButton(
+                modifier = Modifier.size(24.dp),
+                onClick = { navController.navigate("${AppRoutes.COMMENTS}/$poetId/$poemId") }) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Outlined.Comment,
+                    contentDescription = stringResource(R.string.COMMENT),
+
+                    )
+            }
+            IconButton(
+                modifier = Modifier.size(24.dp),
+                onClick = { versesViewModel.onBookmarkClicked() }) {
+                if (isBookmarked) {
+                    Icon(
+                        imageVector = Icons.Filled.Favorite,
+                        contentDescription = stringResource(R.string.UN_BOOKMARK),
+                        tint = Color.Red,
+                    )
+                } else {
+                    Icon(
+                        imageVector = Icons.Outlined.FavoriteBorder,
+                        contentDescription = stringResource(R.string.BOOKMARK),
+                    )
+                }
+            }
+
+            IconButton(
+                modifier = Modifier.size(24.dp),
+                onClick = { versesViewModel.share(versesViewModel.verses.value, context) }) {
+                Icon(
+                    imageVector = Icons.Default.Share,
+                    contentDescription = stringResource(R.string.SHARE),
+                )
+            }
+
+            Row {
+                AnimatedVisibility(
+                    visible = selectMode,
+                    enter = slideInHorizontally(),
+                    exit = slideOutHorizontally(),
+                ) {
+                    TextButton(onClick = onToggleSelectMode, modifier = Modifier.size(24.dp)) {
+                        Icon(
+                            imageVector = Icons.Outlined.Cancel,
+                            contentDescription = stringResource(R.string.CANCEL),
+                            modifier = Modifier.size(24.dp)
+                        )
+                    }
+                    Spacer(modifier = Modifier.weight(0.1f))
+                }
+
+                VerseScreenMoreOptionsMenu(
+                    expanded = expanded,
+                    onToggleExpanded = { expanded = !expanded },
+                    showVerseNumbers = showVerseNumbers,
+                    selectMode = selectMode,
+                    onToggleVerseNumbers = onToggleVerseNumbers,
+                    onToggleSelectMode = onToggleSelectMode,
+                )
+            }
+        }
+        HorizontalDivider()
+    }
+}

app/src/main/java/ir/jaamebaade/jaamebaade_client/view/components/PoemScreenPathHeader.kt

@@ -0,0 +1,103 @@
+package ir.jaamebaade.jaamebaade_client.view.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+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.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
+import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.navigation.navOptions
+import ir.jaamebaade.jaamebaade_client.R
+import ir.jaamebaade.jaamebaade_client.constants.AppRoutes
+import ir.jaamebaade.jaamebaade_client.model.VersePoemCategoriesPoet
+import ir.jaamebaade.jaamebaade_client.model.toPathHeaderText
+
+@Composable
+fun PoemScreenPathHeader(
+    navController: NavController,
+    poetId: Int,
+    poemId: Int,
+    minId: Int,
+    maxId: Int,
+    path: VersePoemCategoriesPoet?,
+) {
+    Row(
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .background(color = MaterialTheme.colorScheme.secondaryContainer)
+            .fillMaxWidth()
+            .padding(4.dp),
+    ) {
+
+        IconButton(
+            modifier = Modifier
+                .weight(0.1f)
+                .size(32.dp),
+            onClick = {
+                navController.navigate(
+                    "${AppRoutes.POEM}/${poetId}/${poemId - 1}/-1",
+                    navOptions {
+                        popUpTo("${AppRoutes.POEM}/${poetId}/${poemId}/-1") {
+                            inclusive = true
+                        }
+                    }
+                )
+            },
+            enabled = poemId - 1 >= minId
+        ) {
+            Icon(
+                imageVector = Icons.AutoMirrored.Filled.KeyboardArrowLeft,
+                contentDescription = stringResource(R.string.PREVIOUS)
+            )
+        }
+
+        Text(
+            modifier = Modifier.weight(0.8f),
+            text = path?.toPathHeaderText(includePoemTitle = false) ?: "",
+            style = MaterialTheme.typography.bodyMedium,
+            textAlign = TextAlign.Center,
+            maxLines = 4,
+            overflow = TextOverflow.Ellipsis
+        )
+
+        IconButton(
+            modifier = Modifier
+                .weight(0.1f)
+                .size(32.dp),
+            onClick = {
+                navController.navigate(
+                    "${AppRoutes.POEM}/${poetId}/${poemId + 1}/-1",
+                    navOptions {
+                        popUpTo("${AppRoutes.POEM}/${poetId}/${poemId}/-1") {
+                            inclusive = true
+                        }
+                    }
+                )
+            },
+            enabled = poemId + 1 <= maxId
+        ) {
+            Icon(
+                imageVector = Icons.AutoMirrored.Filled.KeyboardArrowRight,
+                contentDescription = stringResource(R.string.NEXT),
+
+                )
+        }
+
+    }
+}