fix: expand space between stars in rating slider

Also add haptic feedback

Author: heddxh

app/src/main/kotlin/day/vitayuzu/neodb/ui/component/Star.kt

@@ -27,6 +27,7 @@ fun StarsWithScores(
     modifier: Modifier = Modifier,
     showScores: Boolean = true,
     size: Int = 16,
+    starSpace: Int = 2,
 ) {
     val ratingInFive = rating.div(2)
     Row(
@@ -38,6 +39,7 @@ fun StarsWithScores(
             full = ratingInFive.toInt(),
             half = ratingInFive > ratingInFive.toInt(),
             size = size,
+            space = starSpace,
         )
         if (showScores) {
             Text(
@@ -56,9 +58,10 @@ fun RatingStars(
     modifier: Modifier = Modifier,
     empty: Int = 5 - full - if (half) 1 else 0,
     size: Int = 16,
+    space: Int = 2,
 ) {
     Row(
-        horizontalArrangement = Arrangement.spacedBy(2.dp, Alignment.Start),
+        horizontalArrangement = Arrangement.spacedBy(space.dp, Alignment.Start),
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier,
     ) {

app/src/main/kotlin/day/vitayuzu/neodb/ui/page/detail/PostComposeModal.kt

@@ -52,6 +52,8 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -177,17 +179,22 @@ private fun ComposeModalContent(
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
         ) {
+            val haptic = LocalHapticFeedback.current
             AnimatedVisibility(visible = selectedShelfTypeIndex != 0) {
                 Slider(
                     value = ratingSliderValue,
                     valueRange = 0f..10f,
                     steps = 9,
-                    onValueChange = { ratingSliderValue = it },
+                    onValueChange = {
+                        haptic.performHapticFeedback(HapticFeedbackType.SegmentTick)
+                        ratingSliderValue = it
+                    },
                     track = {
                         StarsWithScores(
                             size = 36,
                             rating = ratingSliderValue,
                             showScores = false,
+                            starSpace = 4,
                         )
                     },
                     thumb = {}, // clear thumb on the bottom