feat(ui): initial channel browser and some ui groundwork

ui/src/androidMain/kotlin/moe/lava/neon/ui/ColorScheme.android.kt

@@ -0,0 +1,25 @@
+package moe.lava.neon.ui
+
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.expressiveLightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+actual fun getColorScheme(): ColorScheme {
+    val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
+    val darkTheme = isSystemInDarkTheme()
+    return when {
+        dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
+        dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
+        darkTheme -> darkColorScheme()
+        else -> expressiveLightColorScheme()
+    }
+}

ui/src/commonMain/composeResources/drawable/arrow_drop_down.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="M480,600L280,400L680,400L480,600Z"/>
+</vector>

ui/src/commonMain/composeResources/drawable/arrow_drop_up.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="M280,560L480,360L680,560L280,560Z"/>
+</vector>

ui/src/commonMain/composeResources/drawable/tag.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="M240,800L280,640L120,640L140,560L300,560L340,400L180,400L200,320L360,320L400,160L480,160L440,320L600,320L640,160L720,160L680,320L840,320L820,400L660,400L620,560L780,560L760,640L600,640L560,800L480,800L520,640L360,640L320,800L240,800ZM380,560L540,560L580,400L420,400L380,560Z"/>
+</vector>

ui/src/commonMain/composeResources/drawable/volume_up.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="M560,829L560,747Q650,721 705,647Q760,573 760,479Q760,385 705,311Q650,237 560,211L560,129Q684,157 762,254.5Q840,352 840,479Q840,606 762,703.5Q684,801 560,829ZM120,600L120,360L280,360L480,160L480,800L280,600L120,600ZM560,640L560,318Q607,340 633.5,384Q660,428 660,480Q660,531 633.5,574.5Q607,618 560,640ZM400,354L314,440L200,440L200,520L314,520L400,606L400,354ZM300,480L300,480L300,480L300,480L300,480L300,480Z"/>
+</vector>

ui/src/commonMain/kotlin/moe/lava/neon/ui/App.kt

@@ -1,6 +1,8 @@
 package moe.lava.neon.ui
 
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.MaterialExpressiveTheme
+import androidx.compose.material3.MotionScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
@@ -27,6 +29,9 @@ private object Route {
 
     @Serializable
     data object Sample : NavKey
+
+    @Serializable
+    data object ChannelBrowser : NavKey
 }
 
 private val config = SavedStateConfiguration {
@@ -34,10 +39,12 @@ private val config = SavedStateConfiguration {
         polymorphic(NavKey::class) {
             subclass(Route.Login::class, Route.Login.serializer())
             subclass(Route.Sample::class, Route.Sample.serializer())
+            subclass(Route.ChannelBrowser::class, Route.ChannelBrowser.serializer())
         }
     }
 }
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun App() {
     Thread.setDefaultUncaughtExceptionHandler { t: Thread, e: Throwable ->
@@ -49,7 +56,10 @@ fun App() {
     val graph = uiGraph.core
     CaptchaBinder(graph.api)
     CompositionLocalProvider(LocalMetroViewModelFactory provides uiGraph.metroViewModelFactory) {
-        MaterialTheme {
+        MaterialExpressiveTheme(
+            colorScheme = getColorScheme(),
+            motionScheme = MotionScheme.expressive(),
+        ) {
             val init = if (graph.auth.token != null) Route.Sample else Route.Login
             val backStack = rememberNavBackStack(config, init)
             NavDisplay(
@@ -70,12 +80,18 @@ fun App() {
                     }
                     entry<Route.Sample> { key ->
                         Sample(
+                            navTest = {
+                                backStack.add(Route.ChannelBrowser)
+                            },
                             onRequestLogout = {
                                 backStack.clear()
                                 backStack.add(Route.Login)
                             }
                         )
                     }
+//                    entry<Route.ChannelBrowser> {
+//                        ChannelBrowser()
+//                    }
                 }
             )
         }

ui/src/commonMain/kotlin/moe/lava/neon/ui/ColorScheme.kt

@@ -0,0 +1,7 @@
+package moe.lava.neon.ui
+
+import androidx.compose.material3.ColorScheme
+import androidx.compose.runtime.Composable
+
+@Composable
+expect fun getColorScheme(): ColorScheme

ui/src/commonMain/kotlin/moe/lava/neon/ui/layout/ChannelBrowser.kt

@@ -0,0 +1,247 @@
+package moe.lava.neon.ui.layout
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItemDefaults
+import androidx.compose.material3.MaterialExpressiveTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SegmentedListItem
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.material3.rememberStandardBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewScreenSizes
+import androidx.compose.ui.unit.dp
+import moe.lava.neon.resources.Res
+import moe.lava.neon.resources.arrow_drop_down
+import moe.lava.neon.resources.arrow_drop_up
+import moe.lava.neon.resources.tag
+import moe.lava.neon.resources.volume_up
+import org.jetbrains.compose.resources.painterResource
+
+data class ChannelBrowserModel(
+    val guildName: String,
+    val channels: List<Category>,
+) {
+    data class Category(
+        val name: String,
+        val channels: List<Channel>,
+    )
+    data class Channel(
+        val name: String,
+        val type: ChannelType,
+    )
+    enum class ChannelType {
+        Text,
+        Voice
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+fun ChannelBrowser(
+    model: ChannelBrowserModel
+) {
+    val peekHeight = 128.dp
+    val colors = ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
+    BottomSheetScaffold(
+        sheetContent = {},
+        scaffoldState = rememberBottomSheetScaffoldState(
+            bottomSheetState = rememberStandardBottomSheetState(SheetValue.Hidden, skipHiddenState = false)
+        ),
+        sheetPeekHeight = peekHeight,
+        topBar = {
+            TopAppBar(
+                title = { Text(model.guildName) }
+            )
+        },
+    ) {
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .verticalScroll(rememberScrollState()),
+            verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
+        ) {
+            for (cat in model.channels) {
+                var expanded by rememberSaveable { mutableStateOf(true) }
+                val base = ListItemDefaults.segmentedShapes(0, 2)
+                val large = MaterialTheme.shapes.large
+
+                SegmentedListItem(
+                    onClick = { expanded = !expanded },
+                    colors = colors,
+                    shapes = if (expanded) base else base.copy(shape = large),
+                    trailingContent = {
+                        Icon(
+                            painterResource(if (expanded) Res.drawable.arrow_drop_up else Res.drawable.arrow_drop_down),
+                            contentDescription = null,
+                            modifier = Modifier
+                                .background(
+                                    if (expanded) MaterialTheme.colorScheme.surface else Color.Transparent,
+                                    shape = RoundedCornerShape(100)
+                                )
+                                .padding(6.dp),
+                            tint = MaterialTheme.colorScheme.onSurface,
+                        )
+                    },
+                ) {
+                    Text(text = cat.name)
+                }
+                AnimatedVisibility(
+                    visible = expanded,
+                    enter = expandVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
+                    exit = shrinkVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
+                ) {
+                    Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
+                        cat.channels.forEachIndexed { idx, ch ->
+                            SegmentedListItem(
+                                onClick = {},
+                                colors = colors,
+                                leadingContent = {
+                                    val res = when (ch.type) {
+                                        ChannelBrowserModel.ChannelType.Text -> Res.drawable.tag
+                                        ChannelBrowserModel.ChannelType.Voice -> Res.drawable.volume_up
+                                    }
+                                    Icon(
+                                        painterResource(res),
+                                        contentDescription = null,
+                                        modifier = Modifier
+                                            .background(
+                                                MaterialTheme.colorScheme.surface,
+                                                shape = RoundedCornerShape(100)
+                                            )
+                                            .padding(6.dp),
+                                        tint = MaterialTheme.colorScheme.onSurface,
+                                    )
+                                },
+                                shapes = ListItemDefaults.segmentedShapes(
+                                    idx + 1,
+                                    cat.channels.size + 1
+                                )
+                            ) {
+                                Text(text = ch.name)
+                            }
+                        }
+                    }
+                }
+                Spacer(Modifier.height(10.dp))
+            }
+            Spacer(Modifier.height(peekHeight + 4.dp))
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@PreviewScreenSizes
+@Preview
+@Composable
+internal fun ChannelBrowserPreview() {
+    MaterialExpressiveTheme {
+        ChannelBrowser(
+            ChannelBrowserModel(
+                guildName = "My Awesome Guild",
+                channels = listOf(
+                    ChannelBrowserModel.Category(
+                        name = "Text Channels",
+                        channels = listOf(
+                            ChannelBrowserModel.Channel(
+                                "general",
+                                ChannelBrowserModel.ChannelType.Text
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "random",
+                                ChannelBrowserModel.ChannelType.Text
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "music-discussion",
+                                ChannelBrowserModel.ChannelType.Text
+                            )
+                        )
+                    ),
+                    ChannelBrowserModel.Category(
+                        name = "Voice Channels",
+                        channels = listOf(
+                            ChannelBrowserModel.Channel(
+                                "General",
+                                ChannelBrowserModel.ChannelType.Voice
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "Gaming",
+                                ChannelBrowserModel.ChannelType.Voice
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "dev-voice",
+                                ChannelBrowserModel.ChannelType.Voice
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "chill",
+                                ChannelBrowserModel.ChannelType.Voice
+                            )
+                        )
+                    ),
+                    ChannelBrowserModel.Category(
+                        name = "Development",
+                        channels = listOf(
+                            ChannelBrowserModel.Channel(
+                                "neon",
+                                ChannelBrowserModel.ChannelType.Text
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "compose",
+                                ChannelBrowserModel.ChannelType.Text
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "dev-voice-chat",
+                                ChannelBrowserModel.ChannelType.Voice
+                            )
+                        )
+                    ),
+                    ChannelBrowserModel.Category(
+                        name = "Off-topic",
+                        channels = listOf(
+                            ChannelBrowserModel.Channel(
+                                "memes",
+                                ChannelBrowserModel.ChannelType.Text
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "music",
+                                ChannelBrowserModel.ChannelType.Voice
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "anime",
+                                ChannelBrowserModel.ChannelType.Text
+                            ),
+                            ChannelBrowserModel.Channel(
+                                "gaming-chat",
+                                ChannelBrowserModel.ChannelType.Text
+                            )
+                        )
+                    )
+                )
+            )
+        )
+    }
+}

ui/src/commonMain/kotlin/moe/lava/neon/ui/screens/Login.kt

@@ -63,6 +63,7 @@ fun Login(
             onValueChange = { email = it },
             label = { Text("Enter email") },
         )
+        // TODO: Switch to SecureTextField
         OutlinedTextField(
             value = password,
             onValueChange = { password = it },

ui/src/commonMain/kotlin/moe/lava/neon/ui/screens/Sample.kt

@@ -34,7 +34,10 @@ import moe.lava.neon.ui.Greeting
 import org.jetbrains.compose.resources.painterResource
 
 @Composable
-fun Sample(onRequestLogout: () -> Unit) {
+fun Sample(
+    navTest: () -> Unit,
+    onRequestLogout: () -> Unit,
+) {
     val viewModel: SampleViewModel = metroViewModel()
     var showContent by remember { mutableStateOf(false) }
     Column(
@@ -47,6 +50,9 @@ fun Sample(onRequestLogout: () -> Unit) {
         Button(onClick = { showContent = !showContent }) {
             Text("Click me!")
         }
+        Button(onClick = { navTest() }) {
+            Text("Click me too!")
+        }
         AnimatedVisibility(showContent) {
             val greeting = remember { Greeting().greet() }
             Column(

ui/src/jvmMain/kotlin/moe/lava/neon/ui/ColorScheme.jvm.kt

@@ -0,0 +1,17 @@
+package moe.lava.neon.ui
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.expressiveLightColorScheme
+import androidx.compose.runtime.Composable
+
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+actual fun getColorScheme(): ColorScheme {
+    return when (isSystemInDarkTheme()) {
+        true -> darkColorScheme()
+        false -> expressiveLightColorScheme()
+    }
+}