Konfeature plugin redesign

panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelDialog.kt

@@ -0,0 +1,46 @@
+package com.redmadrobot.debug.uikit.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import com.redmadrobot.debug.uikit.theme.DebugPanelShapes
+import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
+
+@Composable
+public fun PanelDialog(
+    title: String,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Dialog(
+        onDismissRequest = onDismiss,
+        properties = DialogProperties(usePlatformDefaultWidth = false),
+    ) {
+        Surface(
+            shape = DebugPanelShapes.dialog,
+            color = DebugPanelTheme.colors.surface.dialog,
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(horizontal = 24.dp),
+        ) {
+            Column(modifier = Modifier.padding(all = 24.dp)) {
+                Text(
+                    text = title,
+                    style = DebugPanelTheme.typography.titleLarge,
+                    color = DebugPanelTheme.colors.content.primary,
+                    modifier = Modifier.padding(bottom = 16.dp),
+                )
+                content()
+            }
+        }
+    }
+}

panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelSearchBar.kt

@@ -0,0 +1,94 @@
+package com.redmadrobot.debug.uikit.components
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.redmadrobot.debug.uikit.R
+import com.redmadrobot.debug.uikit.theme.DebugPanelDimensions
+import com.redmadrobot.debug.uikit.theme.DebugPanelShapes
+import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
+import com.redmadrobot.debug.uikit.theme.MonoFontFamily
+
+@Suppress("LongMethod")
+@Composable
+public fun PanelSearchBar(
+    query: String,
+    placeholder: String,
+    onQueryChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val minHeight by animateDpAsState(
+        targetValue = if (query.isNotEmpty()) 48.dp else 40.dp,
+        label = "",
+    )
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .heightIn(min = minHeight)
+            .background(
+                color = DebugPanelTheme.colors.surface.secondary,
+                shape = DebugPanelShapes.medium,
+            )
+            .padding(horizontal = 12.dp, vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.icon_search),
+            contentDescription = null,
+            tint = DebugPanelTheme.colors.content.tertiary,
+            modifier = Modifier.size(size = DebugPanelDimensions.iconSizeSmall),
+        )
+        BasicTextField(
+            value = query,
+            onValueChange = onQueryChange,
+            modifier = Modifier
+                .weight(weight = 1f)
+                .padding(horizontal = 8.dp),
+            textStyle = DebugPanelTheme.typography.bodyMedium.copy(
+                fontFamily = MonoFontFamily,
+                color = DebugPanelTheme.colors.content.primary,
+            ),
+            singleLine = true,
+            cursorBrush = SolidColor(value = DebugPanelTheme.colors.content.accent),
+            decorationBox = { innerTextField ->
+                if (query.isEmpty()) {
+                    Text(
+                        text = placeholder,
+                        style = DebugPanelTheme.typography.bodyMedium,
+                        color = DebugPanelTheme.colors.content.tertiary,
+                    )
+                }
+                innerTextField()
+            },
+        )
+        if (query.isNotEmpty()) {
+            IconButton(
+                onClick = { onQueryChange("") },
+                modifier = Modifier.size(size = DebugPanelDimensions.iconSizeLarge),
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.icon_clear),
+                    contentDescription = null,
+                    tint = DebugPanelTheme.colors.content.tertiary,
+                    modifier = Modifier.size(size = DebugPanelDimensions.iconSizeSmall),
+                )
+            }
+        }
+    }
+}

panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelStyledTextField.kt

@@ -0,0 +1,65 @@
+package com.redmadrobot.debug.uikit.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldColors
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
+
+private val defaultTextStyle: TextStyle
+    @Composable get() = DebugPanelTheme.typography.bodyMedium.copy(
+        color = DebugPanelTheme.colors.content.primary,
+    )
+
+private val defaultColors: TextFieldColors
+    @Composable get() = OutlinedTextFieldDefaults.colors(
+        focusedBorderColor = DebugPanelTheme.colors.content.accent,
+        unfocusedBorderColor = DebugPanelTheme.colors.stroke.secondary,
+        focusedLabelColor = DebugPanelTheme.colors.content.accent,
+        unfocusedLabelColor = DebugPanelTheme.colors.content.tertiary,
+        errorBorderColor = DebugPanelTheme.colors.content.error,
+        cursorColor = DebugPanelTheme.colors.content.accent,
+    )
+
+@Composable
+public fun PanelStyledTextField(
+    value: String,
+    label: String,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    isError: Boolean = false,
+    errorMessage: String? = null,
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    textStyle: TextStyle = defaultTextStyle,
+    colors: TextFieldColors = defaultColors
+) {
+    Column(modifier = modifier.fillMaxWidth()) {
+        OutlinedTextField(
+            value = value,
+            onValueChange = onValueChange,
+            modifier = Modifier.fillMaxWidth(),
+            label = { Text(text = label, style = DebugPanelTheme.typography.bodyMedium) },
+            isError = isError,
+            singleLine = true,
+            keyboardOptions = keyboardOptions,
+            textStyle = textStyle,
+            colors = colors,
+        )
+        if (isError && errorMessage != null) {
+            Text(
+                text = errorMessage,
+                style = DebugPanelTheme.typography.bodySmall,
+                color = DebugPanelTheme.colors.content.error,
+                modifier = Modifier.padding(top = 4.dp),
+            )
+        }
+    }
+}

panel-ui-kit/src/main/kotlin/com/redmadrobot/debug/uikit/components/PanelToggle.kt

@@ -0,0 +1,50 @@
+package com.redmadrobot.debug.uikit.components
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.redmadrobot.debug.uikit.theme.DebugPanelDimensions
+import com.redmadrobot.debug.uikit.theme.DebugPanelTheme
+
+@Composable
+public fun PanelToggle(
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val (trackColor, thumbOffset) = with(DebugPanelTheme.colors) {
+        if (checked) content.teal to 22.dp else stroke.primary to 2.dp
+    }
+    val animatedTrackColor by animateColorAsState(targetValue = trackColor, label = "")
+    val animatedThumbOffset by animateDpAsState(targetValue = thumbOffset, label = "")
+
+    Box(
+        modifier = modifier
+            .width(width = DebugPanelDimensions.toggleWidth)
+            .height(height = DebugPanelDimensions.toggleHeight)
+            .clip(shape = RoundedCornerShape(size = 12.dp))
+            .background(color = animatedTrackColor)
+            .clickable { onCheckedChange(!checked) },
+    ) {
+        Box(
+            modifier = Modifier
+                .padding(start = animatedThumbOffset, top = 2.dp)
+                .size(size = 20.dp)
+                .background(color = Color.White, shape = CircleShape),
+        )
+    }
+}

panel-ui-kit/src/main/res/drawable/icon_clear.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />
+</vector>

panel-ui-kit/src/main/res/drawable/icon_search.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z" />
+</vector>