Add a filter button on the player inventory.

composeApp/src/commonMain/composeResources/drawable/ic_filter_list_24dp.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+    <path
+        android:fillColor="#000000"
+        android:pathData="M400,720L400,640L560,640L560,720L400,720ZM240,520L240,440L720,440L720,520L240,520ZM120,320L120,240L840,240L840,320L120,320Z" />
+</vector>

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventory.kt

@@ -1,16 +1,23 @@
 package com.pixelized.desktop.lwa.ui.screen.campaign.player.detail.inventory
 
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.calculateEndPadding
 import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
@@ -22,6 +29,7 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.AddCircle
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.State
@@ -32,6 +40,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.Dp
@@ -53,11 +62,13 @@ import com.pixelized.desktop.lwa.ui.screen.campaign.player.detail.inventory.item
 import com.pixelized.desktop.lwa.ui.theme.color.component.LwaButtonColors
 import com.pixelized.desktop.lwa.ui.theme.color.component.LwaTextFieldColors
 import com.pixelized.desktop.lwa.ui.theme.lwa
+import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.launch
 import lwacharactersheet.composeapp.generated.resources.Res
 import lwacharactersheet.composeapp.generated.resources.character__inventory__add_to_inventory__action
 import lwacharactersheet.composeapp.generated.resources.ic_cancel_24dp
+import lwacharactersheet.composeapp.generated.resources.ic_filter_list_24dp
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 import org.koin.compose.viewmodel.koinViewModel
@@ -66,6 +77,7 @@ import org.koin.compose.viewmodel.koinViewModel
 data class CharacterDetailInventoryUio(
     val characterSheetId: String,
     val addItemAction: StateFlow<Boolean>,
+    val showFilter: StateFlow<Boolean>,
     val filter: LwaTextFieldUio,
     val purse: PurseUio,
     val items: List<InventoryItemUio>,
@@ -292,19 +304,24 @@ private fun CharacterDetailInventoryContent(
                     horizontalArrangement = Arrangement.spacedBy(space = spacing),
                 ) {
                     InventoryPurse(
-                        modifier = Modifier.weight(weight = 1f),
                         purse = inventory.purse,
                         onPurse = { onPurse(inventory.characterSheetId) },
                     )
-                    LwaTextField(
-                        modifier = Modifier.weight(weight = 1f),
+                    Spacer(
+                        modifier = Modifier.weight(weight = 1f)
+                    )
+                    AnimatedContent(
+                        targetState = inventory.showFilter.collectAsState().value,
+                    ) {
+                        when (it) {
+                            true -> LwaTextField(
                                 colors = LwaTextFieldColors(
                                     backgroundColor = MaterialTheme.lwa.colorScheme.elevated.base2dp,
                                 ),
                                 field = inventory.filter,
                                 trailingIcon = {
                                     val value = inventory.filter.valueFlow.collectAsState()
-                            AnimatedVisibility(
+                                    androidx.compose.animation.AnimatedVisibility(
                                         visible = value.value.isNotBlank(),
                                         enter = fadeIn(),
                                         exit = fadeOut(),
@@ -321,6 +338,22 @@ private fun CharacterDetailInventoryContent(
                                     }
                                 }
                             )
+
+                            else -> Box(
+                                modifier = Modifier
+                                    .clip(shape = MaterialTheme.lwa.shapes.base.small)
+                                    .clickable { (inventory.showFilter as? MutableStateFlow<Boolean>)?.value = true }
+                                    .size(size = 32.dp),
+                                contentAlignment = Alignment.Center,
+                            ) {
+                                Icon(
+                                    painter = painterResource(Res.drawable.ic_filter_list_24dp),
+                                    tint = MaterialTheme.lwa.colorScheme.base.primary,
+                                    contentDescription = null
+                                )
+                            }
+                        }
+                    }
                 }
             }
             items(

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventoryFactory.kt

@@ -13,6 +13,7 @@ import com.pixelized.shared.lwa.model.inventory.Inventory
 import com.pixelized.shared.lwa.model.item.Item
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.combine
@@ -45,6 +46,7 @@ class CharacterDetailInventoryFactory(
         addItemAction: StateFlow<Boolean>,
         initialValue: () -> CharacterDetailInventoryUio?,
     ): StateFlow<CharacterDetailInventoryUio?> {
+        val showFilterFlow = MutableStateFlow(false)
         val filterFlow = createLwaTextFieldFlow(
             label = getString(Res.string.character__inventory__filter_inventory__label),
             value = "",
@@ -56,6 +58,7 @@ class CharacterDetailInventoryFactory(
         ) { inventory, items, filter ->
             convertToCharacterInventoryUio(
                 characterSheetId = characterSheetId,
+                showFilter = showFilterFlow,
                 filter = filterFlow.createLwaTextField(),
                 addItemAction = addItemAction,
                 purse = inventory.purse,
@@ -71,6 +74,7 @@ class CharacterDetailInventoryFactory(
 
     private fun convertToCharacterInventoryUio(
         characterSheetId: String?,
+        showFilter: StateFlow<Boolean>,
         filter: LwaTextFieldUio,
         addItemAction: StateFlow<Boolean>,
         purse: Inventory.Purse?,
@@ -86,6 +90,7 @@ class CharacterDetailInventoryFactory(
                 silver = purse?.silver ?: 0,
                 copper = purse?.copper ?: 0,
             ),
+            showFilter = showFilter,
             filter = filter,
             addItemAction = addItemAction,
             items = inventory

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt

@@ -10,13 +10,11 @@ import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -29,11 +27,6 @@ import androidx.compose.ui.unit.dp
 import com.pixelized.desktop.lwa.ui.composable.currency.Currency
 import com.pixelized.desktop.lwa.ui.composable.currency.CurrencyUio
 import com.pixelized.desktop.lwa.ui.theme.lwa
-import lwacharactersheet.composeapp.generated.resources.Res
-import lwacharactersheet.composeapp.generated.resources.ic_copper_32px
-import lwacharactersheet.composeapp.generated.resources.ic_gold_32px
-import lwacharactersheet.composeapp.generated.resources.ic_silver_32px
-import org.jetbrains.compose.resources.painterResource
 
 @Stable
 data class PurseUio(
@@ -55,17 +48,13 @@ fun InventoryPurse(
     paddings: PaddingValues = InventoryPurseDefault.paddings,
     purse: PurseUio,
     onPurse: () -> Unit,
-) {
-    Row(
-        modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Start,
 ) {
     Row(
         modifier = Modifier
             .clip(shape = MaterialTheme.lwa.shapes.item)
             .clickable { onPurse() }
-                .padding(paddingValues = paddings),
+            .padding(paddingValues = paddings)
+            .then(other = modifier),
         horizontalArrangement = Arrangement.spacedBy(space = 8.dp),
     ) {
         Row(verticalAlignment = Alignment.Bottom) {
@@ -117,7 +106,6 @@ fun InventoryPurse(
         }
     }
 }
-}
 
 @Composable
 @Stable