Tweak icon preview composable

LawnchairLauncher · Jun 14, 2024 · 88d27ec · 88d27ec
1 parent 2216d46
commit 88d27ec
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 16 deletions.
diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/core/ListRow.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/core/ListRow.kt
@@ -65,7 +65,7 @@ fun ListRow(
                             ),
                         )
                         .background(
-                            MaterialTheme.colorScheme.surfaceContainerLow,
+                            MaterialTheme.colorScheme.surfaceContainer,
                         )
                 } else {
                     Modifier

diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconInfoSheet.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconInfoSheet.kt
@@ -222,7 +222,7 @@ fun IconInfoSheet(
                                 modifier = Modifier
                                     .padding(horizontal = 16.dp)
                                     .then(
-                                        if (isLast)
+                                        if (isLast) {
                                             Modifier
                                                 .clip(
                                                     RoundedCornerShape(
@@ -232,18 +232,22 @@ fun IconInfoSheet(
                                                         bottomEnd = 16.dp,
                                                     ),
                                                 )
-                                        else Modifier,
+                                        } else {
+                                            Modifier
+                                        },
                                     ),
                                 color = MaterialTheme.colorScheme.surfaceContainer,
                             ) {
                                 Column(
                                     Modifier
                                         .padding(start = 16.dp)
                                         .then(
-                                            if (isLast)
+                                            if (isLast) {
                                                 Modifier
                                                     .padding(bottom = 16.dp)
-                                            else Modifier
+                                            } else {
+                                                Modifier
+                                            },
                                         )
                                         .fillMaxWidth()
                                         .horizontalScroll(rememberScrollState()),

diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconPreview.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconPreview.kt
@@ -102,7 +102,7 @@ fun IconPreview(
         }
     }
     if (isIconInfoShown.value) {
-        IconInfoPopup(
+        IconInfoSheet(
             iconInfo = iconInfo,
         ) {
             isIconInfoShown.value = it

diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconPreviewGrid.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconPreviewGrid.kt
@@ -1,26 +1,39 @@
 package app.lawnchair.lawnicons.ui.components.home
 
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import app.lawnchair.lawnicons.model.IconInfo
+import app.lawnchair.lawnicons.model.getFirstLabelAndComponent
 import app.lawnchair.lawnicons.ui.theme.LawniconsTheme
 import app.lawnchair.lawnicons.ui.util.PreviewLawnicons
 import app.lawnchair.lawnicons.ui.util.SampleData
@@ -39,8 +52,27 @@ fun IconPreviewGrid(
     modifier: Modifier = Modifier,
     isIconPicker: Boolean = false,
     contentPadding: PaddingValues? = null,
-    listState: LazyGridState = rememberLazyGridState(),
+    gridState: LazyGridState = rememberLazyGridState(),
 ) {
+    val groupedIcons = iconInfo.groupBy {
+        val label = it.getFirstLabelAndComponent().label
+        if (label.isEmpty()) {
+            "1-9"
+        } else {
+            val firstChar = label.firstOrNull()?.uppercase() ?: ""
+            if (firstChar in "![](){}#0123456789") {
+                "1-9"
+            } else {
+                firstChar
+            }
+        }
+    }
+
+    val headerIndices = remember { mutableStateOf(mutableMapOf<String, Int>()) }
+    var currentIndex = 0
+
+    val currentHeader = remember { mutableStateOf<String?>(null) }
+
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
@@ -53,13 +85,32 @@ fun IconPreviewGrid(
                 )
                 .statusBarsPadding()
                 .padding(top = 26.dp),
-            state = listState,
+            state = gridState,
             settings = ScrollbarSettings(
                 alwaysShowScrollbar = true,
                 thumbUnselectedColor = MaterialTheme.colorScheme.primaryContainer,
                 thumbSelectedColor = MaterialTheme.colorScheme.primary,
                 selectionMode = ScrollbarSelectionMode.Thumb,
             ),
+            indicatorContent = { _, isThumbSelected ->
+                AnimatedVisibility(visible = isThumbSelected) {
+                    Box(
+                        modifier = Modifier
+                            .padding(end = 16.dp)
+                            .background(
+                                color = MaterialTheme.colorScheme.primary,
+                                shape = MaterialTheme.shapes.medium,
+                            ),
+                    ) {
+                        Text(
+                            modifier = Modifier.padding(16.dp),
+                            text = currentHeader.value ?: "#",
+                            style = MaterialTheme.typography.titleMedium,
+                            color = MaterialTheme.colorScheme.onPrimary,
+                        )
+                    }
+                }
+            },
         ) {
             LazyVerticalGrid(
                 columns = GridCells.Adaptive(minSize = 80.dp),
@@ -76,18 +127,50 @@ fun IconPreviewGrid(
                         additionalEnd = 32.dp,
                     )
                 },
-                state = listState,
+                state = gridState,
             ) {
-                items(items = iconInfo) { iconInfo ->
-                    IconPreview(
-                        iconInfo = iconInfo,
-                        isIconPicker = isIconPicker,
-                        onSendResult = onSendResult,
-                    )
+                groupedIcons.forEach { (header, icons) ->
+                    item(
+                        span = { GridItemSpan(maxLineSpan) },
+                        contentType = { "header" },
+                        key = header,
+                    ) {
+                        Row {
+                            Spacer(Modifier.height(16.dp))
+                            Text(
+                                text = header,
+                                style = MaterialTheme.typography.titleMedium,
+                                color = MaterialTheme.colorScheme.onPrimaryContainer,
+                            )
+                        }
+                        headerIndices.value[header] = currentIndex
+                        // ... Content for header item
+                        currentIndex++
+                    }
+                    items(
+                        items = icons,
+                        contentType = { "icon_preview" },
+                    ) { iconInfo ->
+                        IconPreview(
+                            iconInfo = iconInfo,
+                            isIconPicker = isIconPicker,
+                            onSendResult = onSendResult,
+                        )
+                        currentIndex++
+                    }
                 }
             }
         }
     }
+
+    val firstVisibleItemIndex = remember { derivedStateOf { gridState.firstVisibleItemIndex } }
+
+    LaunchedEffect(firstVisibleItemIndex.value) {
+        val lastVisibleHeader = headerIndices.value.entries.lastOrNull {
+            it.value < gridState.firstVisibleItemIndex
+        }?.key
+        currentHeader.value = lastVisibleHeader
+    }
 }
 
 @OptIn(ExperimentalFoundationApi::class)

diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/destination/Home.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/destination/Home.kt
@@ -106,7 +106,7 @@ fun Home(
                             isExpandedScreen = isExpandedScreen,
                             isIconPicker = isIconPicker,
                             onSendResult = onSendResult,
-                            listState = lazyGridState,
+                            gridState = lazyGridState,
                         )
                     }
                 }

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -62,4 +62,6 @@
     <string name="icon_info_outdated_warning">If the icon is outdated due to rebranding, create an issue on GitHub.</string>
     <string name="copy_to_clipboard">Copy to clipboard</string>
     <string name="copied_text">Copied text</string>
+    <string name="component">Component name</string>
+    <string name="toggle_visibility_of_contents">Toggle visibility of contents</string>
 </resources>