refactor More menu and replace AppDropDownMenu with ModalBottomSheet in `LibraryScreen

2026-02-17 11:27:23 +01:00
parent 35080c208b
commit 4dd9fe86aa
5 changed files with 114 additions and 37 deletions
--- a/app/src/main/java/eu/gaudian/translator/view/composable/AppDropdownMenu.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/composable/AppDropdownMenu.kt
@@ -25,6 +25,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.DropdownMenu
@@ -550,7 +551,55 @@ fun AppDropdownMenu(
 // =========================================
 // LEGACY COMPONENTS (UPDATED TO USE UNIFIED STYLES)
 // =========================================
+@Composable
+fun BottomSheetMenuItem(
+    icon: ImageVector,
+    title: String,
+    subtitle: String,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable { onClick() }
+            .padding(horizontal = 24.dp, vertical = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        // Circular Icon Background
+        Surface(
+            shape = CircleShape,
+            color = MaterialTheme.colorScheme.surfaceVariant,
+            modifier = Modifier.size(52.dp)
+        ) {
+            Box(contentAlignment = Alignment.Center) {
+                Icon(
+                    imageVector = icon,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.size(28.dp)
+                )
+            }
+        }

+        Spacer(modifier = Modifier.width(16.dp))
+
+        // Title and Subtitle Column
+        Column(modifier = Modifier.weight(1f)) {
+            Text(
+                text = title,
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+            Spacer(modifier = Modifier.height(2.dp))
+            Text(
+                text = subtitle,
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant
+            )
+        }
+    }
+}
@Composable
 fun LargeDropdownMenuItem(
    text: String,
--- a/app/src/main/java/eu/gaudian/translator/view/composable/BottomNavigationBar.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/composable/BottomNavigationBar.kt
@@ -28,13 +28,13 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemDefaults
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -326,10 +326,11 @@ private fun MoreBottomSheetContent(
        Text(
            text = stringResource(R.string.label_more),
            style = MaterialTheme.typography.titleLarge,
+            fontWeight = FontWeight.Bold, // Added bold to match the new style
            modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
        )

-        HorizontalDivider()
+        // Removed HorizontalDivider() for a cleaner look

        moreItems.forEach { screen ->
            MoreMenuItem(
@@ -340,31 +341,49 @@ private fun MoreBottomSheetContent(
    }
 }

+
+
@Composable
-private fun MoreMenuItem(
+fun MoreMenuItem(
    screen: Screen,
    onClick: () -> Unit
 ) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
-            .clickable(onClick = onClick)
+            .clickable { onClick() }
            .padding(horizontal = 24.dp, vertical = 16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
+        // Circular Icon Background
+        Surface(
+            shape = CircleShape,
+            color = MaterialTheme.colorScheme.surfaceVariant,
+            modifier = Modifier.size(52.dp)
+        ) {
+            Box(contentAlignment = Alignment.Center) {
+                // Adjust this depending on whether your Screen uses ImageVector or Drawable Res
                Icon(
                    imageVector = screen.selectedIcon,
                    contentDescription = null,
-            tint = MaterialTheme.colorScheme.primary
-        )
-        Spacer(modifier = Modifier.width(16.dp))
-        Text(
-            text = stringResource(screen.title),
-            style = MaterialTheme.typography.bodyLarge
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.size(28.dp)
                )
            }
        }

+        Spacer(modifier = Modifier.width(16.dp))
+
+        // Title
+        Text(
+            text = stringResource(id = screen.title), // Adjust to your actual string property
+            style = MaterialTheme.typography.titleMedium,
+            fontWeight = FontWeight.Bold,
+            color = MaterialTheme.colorScheme.onSurface,
+            modifier = Modifier.weight(1f)
+        )
+    }
+}
@ThemePreviews
@Composable
 fun BottomNavigationBarPreview() {
--- a/app/src/main/java/eu/gaudian/translator/view/library/LibraryScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/library/LibraryScreen.kt
@@ -26,6 +26,9 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material.icons.rounded.Folder
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.Button
 import androidx.compose.material3.FilterChip
@@ -60,10 +63,9 @@ import androidx.navigation.NavHostController
 import eu.gaudian.translator.R
 import eu.gaudian.translator.model.VocabularyStage
 import eu.gaudian.translator.utils.findActivity
-import eu.gaudian.translator.view.composable.AppDropDownMenu
 import eu.gaudian.translator.view.composable.AppIcons
 import eu.gaudian.translator.view.composable.AppSwitch
-import eu.gaudian.translator.view.composable.LargeDropdownMenuItem
+import eu.gaudian.translator.view.composable.BottomSheetMenuItem
 import eu.gaudian.translator.view.composable.MultipleLanguageDropdown
 import eu.gaudian.translator.view.dialogs.AddCategoryDialog
 import eu.gaudian.translator.view.dialogs.CategorySelectionDialog
@@ -329,23 +331,30 @@ fun LibraryScreen(
    }

    if (showAddMenu) {
-        AppDropDownMenu(
-            expanded = showAddMenu,
-            onDismissRequest = { showAddMenu = false }
+        ModalBottomSheet(
+            onDismissRequest = { showAddMenu = false },
+            sheetState = sheetState,
+            containerColor = MaterialTheme.colorScheme.surface,
        ) {
-            LargeDropdownMenuItem(
-                text = stringResource(R.string.label_add_vocabulary),
-                selected = false,
-                enabled = true,
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 32.dp) // Extra padding for system navigation bar
+            ) {
+                BottomSheetMenuItem(
+                    icon = Icons.Rounded.Add, // Or any custom vector icon you prefer
+                    title = stringResource(R.string.label_add_vocabulary),
+                    subtitle = "Füge ein neues Wort zu deiner Liste hinzu", // Suggest adding this to strings.xml
                    onClick = {
                        showAddMenu = false
                        navController.navigate("new_word")
                    }
                )
-            LargeDropdownMenuItem(
-                text = stringResource(R.string.label_add_category),
-                selected = false,
-                enabled = true,
+
+                BottomSheetMenuItem(
+                    icon = Icons.Rounded.Folder,
+                    title = stringResource(R.string.label_add_category),
+                    subtitle = "Organisiere deine Vokabeln in Gruppen", // Suggest adding this to strings.xml
                    onClick = {
                        showAddMenu = false
                        showAddCategoryDialog = true
@@ -353,6 +362,7 @@ fun LibraryScreen(
                )
            }
        }
+    }

    if (showAddCategoryDialog) {
        AddCategoryDialog(onDismiss = { showAddCategoryDialog = false })
--- a/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt
+++ b/app/src/main/java/eu/gaudian/translator/view/settings/MainSettingsScreen.kt
@@ -105,7 +105,7 @@ fun MainSettingsScreen(
                    }
                    item {
                        AppCard(
-                            modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp),
+                            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
                        ) {
                            Column {
                                settings.forEachIndexed { index, setting ->
--- a/app/src/main/res/values-de-rDE/strings.xml
+++ b/app/src/main/res/values-de-rDE/strings.xml
@@ -631,7 +631,6 @@
    <string name="label_language_none">Keine</string>
    <string name="text_no_data_available">Keine Daten verfügbar</string>
    <string name="label_grammar_inflections">Flexionen</string>
-    <string name="label_more">Weniger</string>
    <string name="label_translations">Übersetzungen</string>
    <string name="label_show_examples">Beispiele anzeigen</string>
    <string name="label_grammar_hyphenation">Silbentrennung</string>