feat(account-drawer) Made the landscape view and small screen view us…

components/ui/bolt/src/commonMain/kotlin/net/thunderbird/components/ui/bolt/organism/drawer/NavigationDrawerItem.kt

@@ -1,6 +1,9 @@
 package net.thunderbird.components.ui.bolt.organism.drawer
 
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.AccountBox
 import androidx.compose.material3.NavigationDrawerItem as Material3NavigationDrawerItem
@@ -10,9 +13,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import net.thunderbird.components.ui.bolt.PreviewWithThemes
 import net.thunderbird.components.ui.bolt.atom.icon.Icon
 import net.thunderbird.components.ui.bolt.atom.text.TextLabelLarge
+import net.thunderbird.components.ui.bolt.atom.text.TextLabelMedium
+import net.thunderbird.components.ui.bolt.atom.text.TextLabelSmall
+import net.thunderbird.components.ui.bolt.theme.BoltTheme
 
 /**
  * A navigation drawer item that can be used in a navigation drawer.
@@ -32,18 +39,32 @@ fun NavigationDrawerItem(
     modifier: Modifier = Modifier,
     icon: (@Composable () -> Unit)? = null,
     badge: (@Composable () -> Unit)? = null,
+    reduceTextSize: Boolean = false,
 ) {
     NavigationDrawerItem(
         label = {
-            TextLabelLarge(
-                text = label,
-                overflow = TextOverflow.Ellipsis,
-                maxLines = 2,
-            )
+            if (reduceTextSize) {
+                TextLabelLarge(
+                    text = label,
+                    overflow = TextOverflow.Ellipsis,
+                    maxLines = 2,
+                )
+            } else {
+                TextLabelLarge(
+                    text = label,
+                    overflow = TextOverflow.Ellipsis,
+                    maxLines = 2,
+                )
+            }
         },
         selected = selected,
         onClick = onClick,
-        modifier = modifier,
+        modifier = if (reduceTextSize) {
+            modifier
+                .height((BoltTheme.typography.labelLarge.lineHeight.value + BoltTheme.spacings.double.value).dp)
+        } else {
+            modifier
+        },
         icon = icon,
         badge = badge,
     )

feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/DrawerContent.kt

@@ -14,14 +14,17 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
 import net.thunderbird.components.ui.bolt.atom.DividerHorizontal
 import net.thunderbird.components.ui.bolt.atom.Surface
 import net.thunderbird.components.ui.bolt.theme.BoltTheme

feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/account/AccountListItem.kt

@@ -13,7 +13,6 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.withStyle
 import net.thunderbird.components.ui.bolt.atom.icon.Icon
 import net.thunderbird.components.ui.bolt.atom.icon.Icons
-import net.thunderbird.components.ui.bolt.atom.text.TextBodyLarge
 import net.thunderbird.components.ui.bolt.atom.text.TextBodyLargeAutoResize
 import net.thunderbird.components.ui.bolt.atom.text.TextBodyMedium
 import net.thunderbird.components.ui.bolt.organism.drawer.NavigationDrawerItem

feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/AccountSettingList.kt

@@ -1,13 +1,16 @@
 package net.thunderbird.feature.navigation.drawer.dropdown.ui.setting
 
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import net.thunderbird.components.ui.bolt.atom.icon.Icons
 import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
+import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
 import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
 import net.thunderbird.components.ui.bolt.theme.BoltTheme
 import net.thunderbird.feature.navigation.drawer.dropdown.R
@@ -23,12 +26,21 @@ internal fun AccountSettingList(
     val windowSizeInfo = calculateWindowSizeInfo()
     val isLandscape = windowSizeInfo.size.width > windowSizeInfo.size.height
     val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
-    val hideText = isLandscape && isCompactHeight
+    val isSmallDisplay = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small ||
+        windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Small
+    val hideText = (isLandscape && isCompactHeight) || isSmallDisplay
 
     SettingList(
-        modifier = modifier
-            .padding(vertical = BoltTheme.spacings.default)
-            .fillMaxWidth(),
+        modifier = if (hideText) {
+            modifier
+                .padding(vertical = BoltTheme.spacings.double)
+                .fillMaxWidth()
+                .height(BoltTheme.sizes.iconAvatar)
+        } else {
+            modifier
+                .padding(vertical = BoltTheme.spacings.default)
+                .fillMaxWidth()
+        },
     ) {
         item(span = { if (hideText) GridItemSpan(1) else GridItemSpan(maxLineSpan) }) {
             SettingListItem(

feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/FolderSettingList.kt

@@ -1,13 +1,15 @@
 package net.thunderbird.feature.navigation.drawer.dropdown.ui.setting
 
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import net.thunderbird.components.ui.bolt.atom.icon.Icons
 import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
+import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
 import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
 import net.thunderbird.components.ui.bolt.theme.BoltTheme
 import net.thunderbird.feature.navigation.drawer.dropdown.R
@@ -25,12 +27,21 @@ internal fun FolderSettingList(
     val windowSizeInfo = calculateWindowSizeInfo()
     val isLandscape = windowSizeInfo.size.width > windowSizeInfo.size.height
     val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
-    val hideText = isLandscape && isCompactHeight
+    val isSmallDisplay = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small ||
+        windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Small
+    val hideText = (isLandscape && isCompactHeight) || isSmallDisplay
 
     SettingList(
-        modifier = modifier
-            .padding(vertical = BoltTheme.spacings.default)
-            .fillMaxWidth(),
+        modifier = if (hideText) {
+            modifier
+                .padding(vertical = BoltTheme.spacings.double)
+                .fillMaxWidth()
+                .height(BoltTheme.sizes.iconAvatar)
+        } else {
+            modifier
+                .padding(vertical = BoltTheme.spacings.default)
+                .fillMaxWidth()
+        },
     ) {
         if (isUnifiedAccount.not()) {
             item(span = { if (hideText) GridItemSpan(1) else GridItemSpan(maxLineSpan) }) {

feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/SettingList.kt

@@ -1,12 +1,16 @@
 package net.thunderbird.feature.navigation.drawer.dropdown.ui.setting
 
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
+import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
 import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
 
 @Composable
@@ -17,16 +21,27 @@ internal fun SettingList(
     val windowSizeInfo = calculateWindowSizeInfo()
     val isLandscape = windowSizeInfo.size.width > windowSizeInfo.size.height
     val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
+    val isSmallDisplay = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small ||
+        windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Small
     val phoneLandscape = isLandscape && isCompactHeight
 
-    LazyVerticalGrid(
-        columns = if (phoneLandscape) {
-            GridCells.Adaptive(minSize = 64.dp)
-        } else {
-            GridCells.Adaptive(minSize = 200.dp)
-        },
-        modifier = modifier,
-    ) {
-        content()
+    if (isSmallDisplay) {
+        LazyHorizontalGrid(
+            GridCells.Adaptive(minSize = 64.dp),
+            modifier = modifier.fillMaxWidth(),
+        ) {
+            content()
+        }
+    } else {
+        LazyVerticalGrid(
+            columns = if (phoneLandscape) {
+                GridCells.Adaptive(minSize = 64.dp)
+            } else {
+                GridCells.Adaptive(minSize = 200.dp)
+            },
+            modifier = modifier,
+        ) {
+            content()
+        }
     }
 }

feature/navigation/drawer/dropdown/src/main/kotlin/net/thunderbird/feature/navigation/drawer/dropdown/ui/setting/SettingListItem.kt

@@ -6,16 +6,22 @@ import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.infiniteRepeatable
 import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
 import net.thunderbird.components.ui.bolt.atom.button.ButtonIcon
 import net.thunderbird.components.ui.bolt.atom.icon.Icon
 import net.thunderbird.components.ui.bolt.common.window.WindowHeightSizeClass
+import net.thunderbird.components.ui.bolt.common.window.WindowWidthSizeClass
 import net.thunderbird.components.ui.bolt.common.window.calculateWindowSizeInfo
 import net.thunderbird.components.ui.bolt.organism.drawer.NavigationDrawerItem
+import net.thunderbird.components.ui.bolt.theme.BoltTheme
 
 @Composable
 internal fun SettingListItem(
@@ -31,6 +37,7 @@ internal fun SettingListItem(
     // On phones in landscape, the height size class is typically Compact even if width is Medium.
     // Use height size class to better detect phone-in-landscape and hide labels accordingly.
     val isCompactHeight = windowSizeInfo.sizeClass.heightSizeClass == WindowHeightSizeClass.Compact
+    val isSmallWidth = windowSizeInfo.sizeClass.widthSizeClass == WindowWidthSizeClass.Small
     val hideText = isLandscape && isCompactHeight
 
     val rotation: Float = if (isLoading) {
@@ -49,7 +56,20 @@ internal fun SettingListItem(
         0f
     }
 
-    if (hideText) {
+    if (isSmallWidth) {
+        ButtonIcon(
+            onClick = onClick,
+            imageVector = icon,
+            modifier = if (rotation != 0f) {
+                modifier
+                    .rotate(rotation)
+                    .height(BoltTheme.sizes.icon)
+            } else {
+                modifier.height(BoltTheme.sizes.icon)
+            },
+            contentDescription = label,
+        )
+    } else if (hideText) {
         ButtonIcon(
             onClick = onClick,
             imageVector = icon,