✨ added scrollbar and improved dialog peek

shub39 · shub39 · commit 8d48e20cd4b0 · 2025-05-19T15:25:13.000+05:30
Signed-off-by: shub39 &lt;cptnshubham39@gmail.com&gt;
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/home/components/ChaptersSection.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/home/components/ChaptersSection.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.ListItem
@@ -18,6 +19,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.shub39.dharmik.bhagvad_gita.presentation.home.HomeAction
 import com.shub39.dharmik.bhagvad_gita.presentation.home.HomeState
+import com.shub39.dharmik.core.presentation.components.simpleVerticalScrollbar
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
 import compose.icons.fontawesomeicons.solid.ArrowRight
@@ -32,8 +34,12 @@ fun ChaptersSection(
     state: HomeState,
     onAction: (HomeAction) -> Unit
 ) {
+    val listState = rememberLazyListState()
+
     LazyColumn(
+        state = listState,
         modifier = Modifier
+            .simpleVerticalScrollbar(listState)
             .animateContentSize()
             .fillMaxSize(),
         contentPadding = PaddingValues(horizontal = 16.dp),
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/home/components/HomeSection.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/home/components/HomeSection.kt
@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -24,6 +25,7 @@ import androidx.compose.ui.unit.dp
 import com.shub39.dharmik.bhagvad_gita.presentation.components.VerseCard
 import com.shub39.dharmik.bhagvad_gita.presentation.home.HomeAction
 import com.shub39.dharmik.bhagvad_gita.presentation.home.HomeState
+import com.shub39.dharmik.core.presentation.components.simpleVerticalScrollbar
 import com.shub39.dharmik.core.presentation.copyToClipboard
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
@@ -42,11 +44,14 @@ fun HomeSection(
     homeState: HomeState,
     onAction: (HomeAction) -> Unit
 ) = Box {
+    val listState = rememberLazyListState()
     val coroutineScope = rememberCoroutineScope()
     val clipboardManager = LocalClipboard.current
 
     LazyColumn(
+        state = listState,
         modifier = Modifier
+            .simpleVerticalScrollbar(listState)
             .animateContentSize()
             .fillMaxSize(),
         contentPadding = PaddingValues(horizontal = 16.dp),
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/home/components/SettingsSection.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/home/components/SettingsSection.kt
@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Create
 import androidx.compose.material3.FilledTonalIconButton
@@ -34,6 +35,7 @@ import com.shub39.dharmik.core.domain.AppTheme
 import com.shub39.dharmik.core.domain.VerseCardState
 import com.shub39.dharmik.core.presentation.components.DharmikDialog
 import com.shub39.dharmik.core.presentation.components.SettingSlider
+import com.shub39.dharmik.core.presentation.components.simpleVerticalScrollbar
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Brands
 import compose.icons.fontawesomeicons.Solid
@@ -53,13 +55,17 @@ fun SettingsSection(
     state: HomeState,
     onAction: (HomeAction) -> Unit
 ) {
+    val listState = rememberLazyListState()
     val uriHandler = LocalUriHandler.current
 
     var showThemePicker by remember { mutableStateOf(false) }
     var showLanguagePicker by remember { mutableStateOf(false) }
 
     LazyColumn(
-        modifier = Modifier.fillMaxSize(),
+        state = listState,
+        modifier = Modifier
+            .simpleVerticalScrollbar(listState)
+            .fillMaxSize(),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         item {
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/Verses.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/Verses.kt
@@ -49,6 +49,7 @@ import com.shub39.dharmik.bhagvad_gita.presentation.verses.components.Commentari
 import com.shub39.dharmik.bhagvad_gita.presentation.verses.components.TranslationsDisplay
 import com.shub39.dharmik.core.domain.VerseCardState
 import com.shub39.dharmik.core.presentation.components.PageFill
+import com.shub39.dharmik.core.presentation.components.simpleVerticalScrollbar
 import com.shub39.dharmik.core.presentation.copyToClipboard
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
@@ -204,6 +205,7 @@ fun Verses(
             LazyColumn(
                 state = scrollState,
                 modifier = Modifier
+                    .simpleVerticalScrollbar(scrollState)
                     .fillMaxSize(),
                 contentPadding = PaddingValues(16.dp),
                 verticalArrangement = Arrangement.spacedBy(16.dp)
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/components/CommentariesDisplay.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/components/CommentariesDisplay.kt
@@ -65,7 +65,7 @@ fun CommentariesDisplay(
                 if (!value.isNullOrEmpty()) {
                     DialogPeek(
                         title = key,
-                        translation = value,
+                        content = value,
                         onCopy = onCopy,
                         fontSize = fontSize
                     )
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/components/DialogPeek.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/components/DialogPeek.kt
@@ -9,9 +9,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -23,16 +26,16 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.shub39.dharmik.core.presentation.components.DharmikDialog
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
 import compose.icons.fontawesomeicons.solid.Clipboard
 import compose.icons.fontawesomeicons.solid.Eye
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DialogPeek(
     title: String,
-    translation: String,
+    content: String,
     onCopy: (String) -> Unit,
     fontSize: Float = 16f
 ) {
@@ -65,28 +68,27 @@ fun DialogPeek(
     }
 
     if (showComplete) {
-        DharmikDialog(
+        ModalBottomSheet (
             onDismissRequest = { showComplete = false }
         ) {
-            val scrollState = rememberScrollState()
-
             Column(
-                modifier = Modifier
-                    .verticalScroll(scrollState)
-                    .padding(16.dp)
+                modifier = Modifier.verticalScroll(rememberScrollState())
             ) {
                 Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    verticalAlignment = Alignment.CenterVertically,
-                    horizontalArrangement = Arrangement.SpaceBetween
+                    modifier = Modifier
+                        .padding(horizontal = 32.dp)
+                        .fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically
                 ) {
                     Text(
                         text = title,
-                        style = MaterialTheme.typography.titleMedium
+                        color = MaterialTheme.colorScheme.primary,
+                        style = MaterialTheme.typography.titleLarge,
+                        modifier = Modifier.weight(1f)
                     )
 
-                    IconButton(
-                        onClick = { onCopy(translation) }
+                    FilledTonalIconButton (
+                        onClick = { onCopy(content) }
                     ) {
                         Icon(
                             imageVector = FontAwesomeIcons.Solid.Clipboard,
@@ -96,14 +98,13 @@ fun DialogPeek(
                     }
                 }
 
-                Spacer(modifier = Modifier.padding(8.dp))
-
                 Text(
-                    text = translation,
+                    text = content,
                     fontSize = fontSize.sp,
-                    style = MaterialTheme.typography.bodyLarge,
-                    fontWeight = FontWeight.Bold
+                    modifier = Modifier.padding(horizontal = 32.dp, vertical = 16.dp)
                 )
+
+                Spacer(modifier = Modifier.padding(16.dp))
             }
         }
     }
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/components/TranslationsDisplay.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/bhagvad_gita/presentation/verses/components/TranslationsDisplay.kt
@@ -53,7 +53,7 @@ fun TranslationsDisplay(
                 if (value.isNotEmpty()) {
                     DialogPeek(
                         title = key,
-                        translation = value,
+                        content = value,
                         onCopy = onCopy,
                         fontSize = fontSize
                     )
diff --git a/composeApp/src/commonMain/kotlin/com/shub39/dharmik/core/presentation/components/scrollbar.kt b/composeApp/src/commonMain/kotlin/com/shub39/dharmik/core/presentation/components/scrollbar.kt
@@ -0,0 +1,63 @@
+package com.shub39.dharmik.core.presentation.components
+
+import androidx.compose.animation.core.Spring.StiffnessMediumLow
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Modifier.simpleVerticalScrollbar(
+    state: LazyListState,
+    width: Dp = 4.dp,
+): Modifier {
+
+    val targetAlpha = if (state.isScrollInProgress) .7f else 0f
+    val duration = if (state.isScrollInProgress) 150 else 1000
+
+    val alpha by animateFloatAsState(
+        targetValue = targetAlpha,
+        animationSpec = tween(durationMillis = duration)
+    )
+
+    val firstIndex by animateFloatAsState(
+        targetValue = state.layoutInfo.visibleItemsInfo.firstOrNull()?.index?.toFloat() ?: 0f,
+        animationSpec = spring(stiffness = StiffnessMediumLow)
+    )
+
+    val lastIndex by animateFloatAsState(
+        targetValue = state.layoutInfo.visibleItemsInfo.lastOrNull()?.index?.toFloat() ?: 0f,
+        animationSpec = spring(stiffness = StiffnessMediumLow)
+    )
+
+    val color = MaterialTheme.colorScheme.primary
+
+    return drawWithContent {
+        drawContent()
+
+        val itemsCount = state.layoutInfo.totalItemsCount
+
+        if (itemsCount > 0 && alpha > 0f) {
+            val scrollbarTop = firstIndex / itemsCount * size.height
+            val scrollBottom = (lastIndex + 1f) / itemsCount * size.height
+            val scrollbarHeight = scrollBottom - scrollbarTop
+            drawRoundRect(
+                cornerRadius = CornerRadius(width.toPx() / 2, width.toPx() / 2),
+                color = color,
+                topLeft = Offset(size.width - width.toPx(), scrollbarTop),
+                size = Size(width.toPx(), scrollbarHeight),
+                alpha = alpha
+            )
+        }
+    }
+}
diff --git a/composeApp/src/desktopMain/kotlin/com/shub39/dharmik/main.kt b/composeApp/src/desktopMain/kotlin/com/shub39/dharmik/main.kt
@@ -1,5 +1,7 @@
 package com.shub39.dharmik
 
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowState
 import androidx.compose.ui.window.singleWindowApplication
 import com.shub39.dharmik.app.App
@@ -9,7 +11,7 @@ fun main() {
     initKoin()
 
     singleWindowApplication(
-        state = WindowState(),
+        state = WindowState(size = DpSize(width = 700.dp, height = 700.dp)),
         title = "Dharmik"
     ) {
         App()

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ fun CommentariesDisplay(`
`65`	`65`	`if (!value.isNullOrEmpty()) {`
`66`	`66`	`DialogPeek(`
`67`	`67`	`title = key,`
`68`		`- translation = value,`
	`68`	`+ content = value,`
`69`	`69`	`onCopy = onCopy,`
`70`	`70`	`fontSize = fontSize`
`71`	`71`	`)`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ fun TranslationsDisplay(`
`53`	`53`	`if (value.isNotEmpty()) {`
`54`	`54`	`DialogPeek(`
`55`	`55`	`title = key,`
`56`		`- translation = value,`
	`56`	`+ content = value,`
`57`	`57`	`onCopy = onCopy,`
`58`	`58`	`fontSize = fontSize`
`59`	`59`	`)`