feat: Add base calculation summary underneath converter

Signed-off-by: Myzel394 <50424412+Myzel394@users.noreply.github.com>

feature/converter/src/main/java/app/myzel394/numberhub/feature/converter/ConverterScreen.kt

@@ -22,6 +22,7 @@ import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.SizeTransform
 import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.expandHorizontally
@@ -31,6 +32,11 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.AnchoredDraggableState
+import androidx.compose.foundation.gestures.DraggableAnchors
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.anchoredDraggable
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -40,6 +46,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 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.material.icons.Icons
 import androidx.compose.material.icons.outlined.SwapHoriz
@@ -64,6 +71,7 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.focus.onFocusEvent
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextAlign
@@ -94,11 +102,13 @@ import app.myzel394.numberhub.data.common.isExpression
 import app.myzel394.numberhub.data.converter.ConverterResult
 import app.myzel394.numberhub.data.converter.UnitID
 import app.myzel394.numberhub.data.model.converter.UnitGroup
+import app.myzel394.numberhub.feature.converter.components.BaseCalculationSummary
 import app.myzel394.numberhub.feature.converter.components.DefaultKeyboard
 import app.myzel394.numberhub.feature.converter.components.NumberBaseKeyboard
 import app.myzel394.numberhub.feature.converter.components.UnitSelectionButton
 import java.math.BigDecimal
 import java.util.Locale
+import kotlin.math.absoluteValue
 
 @Composable
 internal fun ConverterRoute(
@@ -203,10 +213,30 @@ private fun NumberBase(
         convert()
     }
 
+    val density = LocalDensity.current
+    val dragState = remember {
+        AnchoredDraggableState(
+            initialValue = DragState.CLOSED,
+            anchors = DraggableAnchors {
+                DragState.CLOSED at 0f
+                DragState.OPEN at with(density) { -60.dp.toPx() }
+            },
+            positionalThreshold = { 0f },
+            velocityThreshold = { 0f },
+            animationSpec = tween(easing = LinearEasing, durationMillis = 50),
+        )
+    }
+
     PortraitLandscape(
         modifier = modifier.fillMaxSize(),
         content1 = { contentModifier ->
-            ColumnWithConstraints(modifier = contentModifier) {
+            ColumnWithConstraints(
+                modifier = contentModifier
+                    .anchoredDraggable(
+                        state = dragState,
+                        orientation = Orientation.Vertical,
+                    ),
+            ) {
                 val textFieldModifier = Modifier.weight(2f)
 
                 NumberBaseTextField(
@@ -224,6 +254,17 @@ private fun NumberBase(
                 )
                 AnimatedUnitShortName(stringResource(uiState.unitTo.shortName))
 
+                if (uiState.result is ConverterResult.NumberBase) {
+                    BaseCalculationSummary(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .horizontalScroll(rememberScrollState())
+                            .then(with(density) { Modifier.height(dragState.offset.absoluteValue.toDp()) }),
+                        basis = uiState.unitTo,
+                        result = uiState.result,
+                    )
+                }
+
                 Spacer(modifier = Modifier.height(it.maxHeight * 0.03f))
 
                 UnitSelectionButtons(

feature/converter/src/main/java/app/myzel394/numberhub/feature/converter/DragState.kt

@@ -0,0 +1,3 @@
+package app.myzel394.numberhub.feature.converter
+
+internal enum class DragState { CLOSED, OPEN }

feature/converter/src/main/java/app/myzel394/numberhub/feature/converter/components/BaseCalculationSummary.kt

@@ -0,0 +1,61 @@
+package app.myzel394.numberhub.feature.converter.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.offset
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import app.myzel394.numberhub.data.converter.ConverterResult
+import app.myzel394.numberhub.data.model.converter.unit.BasicUnit
+
+@Composable
+internal fun BaseCalculationSummary(
+    modifier: Modifier = Modifier,
+    basis: BasicUnit.NumberBase,
+    result: ConverterResult.NumberBase,
+) {
+    val fontStyle = MaterialTheme.typography.headlineSmall
+
+    Row(
+        modifier,
+        horizontalArrangement = Arrangement.End,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        for (index in 0..<result.value.length) {
+            val character = result.value[index]
+            val digit = character.digitToInt(16);
+            val base = basis.factor.toInt()
+
+            Text(
+                text = "$digit",
+                style = fontStyle,
+                color = MaterialTheme.colorScheme.primary,
+            )
+            Text(
+                text = " · $base",
+                style = fontStyle,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+            Text(
+                text = "${result.value.length - index - 1}",
+                modifier = Modifier.offset(y = -(MaterialTheme.typography.bodySmall.fontSize.div(2)).value.dp),
+                style = fontStyle.copy(
+                    fontSize = MaterialTheme.typography.bodySmall.fontSize,
+                ),
+                color = MaterialTheme.colorScheme.tertiary,
+            )
+
+            if (index < result.value.length - 1) {
+                Text(
+                    text = " + ",
+                    style = fontStyle,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                )
+            }
+        }
+    }
+}