From 4c9e44d3ce4271935dbf6be4ab08354b1f389148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Font=C3=A1n?= <gabilessto@gmail.com>
Date: Wed, 15 May 2024 21:20:56 +0200
Subject: [PATCH] ui: Created SelectableSurface refactor: Removed duplicated
 code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gabriel Fontán <gabilessto@gmail.com>
---
 .idea/deploymentTargetSelector.xml            |  4 +-
 .idea/other.xml                               | 11 +++
 .../spotify/SpMetadataBottomSheetContent.kt   | 19 +++--
 .../stages/NoSongInformationProvided.kt       | 84 +++++++++++++++++++
 .../spotify/stages/SpMetadataBsDetails.kt     | 66 ++++++++++++---
 .../spotify/stages/SpMetadataBsSearch.kt      | 52 ++++++------
 app/src/main/res/values/strings.xml           |  2 +
 .../dropdown/DropdownMenuImplementation.kt    | 20 +++--
 .../components/dropdown/M3ElevationTokens.kt  |  1 -
 .../ui/components/dropdown/MaterialEasing.kt  |  9 --
 .../ui/components/others/SelectableSurface.kt | 75 +++++++++++++++++
 .../text/PreConfiguredOutlinedTextField.kt    |  5 +-
 .../ui/util/{AppBarUtils.kt => AppBar.kt}     |  0
 .../util/{ComposeDebugUtils.kt => Compose.kt} |  0
 .../util/RememberSaveableWithInitialValue.kt  |  6 +-
 .../ui/util/{ScrollUtilities.kt => Scroll.kt} | 12 +--
 16 files changed, 291 insertions(+), 75 deletions(-)
 create mode 100644 app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/NoSongInformationProvided.kt
 delete mode 100644 app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/MaterialEasing.kt
 create mode 100644 app/ui/src/main/java/com/bobbyesp/ui/components/others/SelectableSurface.kt
 rename app/ui/src/main/java/com/bobbyesp/ui/util/{AppBarUtils.kt => AppBar.kt} (100%)
 rename app/ui/src/main/java/com/bobbyesp/ui/util/{ComposeDebugUtils.kt => Compose.kt} (100%)
 rename app/ui/src/main/java/com/bobbyesp/ui/util/{ScrollUtilities.kt => Scroll.kt} (76%)

diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index 6e5095a..7c11440 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-05-07T21:01:10.548760Z">
+        <DropdownSelection timestamp="2024-05-15T19:04:18.114165Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="PhysicalDevice" identifier="serial=d85c1834" />
+              <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\gabil\.android\avd\Pixel_6_API_30.avd" />
             </handle>
           </Target>
         </DropdownSelection>
diff --git a/.idea/other.xml b/.idea/other.xml
index 1c0036a..82bbc40 100644
--- a/.idea/other.xml
+++ b/.idea/other.xml
@@ -37,6 +37,17 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2160" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="akita" />
+          <option name="id" value="akita" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 8a" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="33" />
           <option name="brand" value="samsung" />
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/SpMetadataBottomSheetContent.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/SpMetadataBottomSheetContent.kt
index 0d3bf89..6b20b35 100644
--- a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/SpMetadataBottomSheetContent.kt
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/SpMetadataBottomSheetContent.kt
@@ -10,11 +10,11 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.SpMetadataBottomSheetContentViewModel.Companion.BottomSheetStage
+import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages.NoSongInformationProvided
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages.SpMetadataBsDetails
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages.SpMetadataBsSearch
 import com.bobbyesp.ui.motion.MotionConstants.DURATION_EXIT_SHORT
@@ -29,20 +29,27 @@ fun SpMetadataBottomSheetContent(
     state: SheetState,
     viewModel: SpMetadataBottomSheetContentViewModel = hiltViewModel()
 ) {
-    val scope = rememberCoroutineScope()
     val viewState = viewModel.viewStateFlow.collectAsStateWithLifecycle().value
+    val lazyListState = rememberLazyListState()
 
     val bottomSheetState = viewState.stage
 
-    val lazyListState = rememberLazyListState()
+    fun search(query: String) {
+        viewModel.updateStage(BottomSheetStage.SEARCH)
+        viewModel.searchTracks(query)
+    }
 
-    if (name.isEmpty() && artist.isEmpty()) return
+    if (name.isEmpty() && artist.isEmpty()) {
+        NoSongInformationProvided { providedName, providedArtist ->
+            val query = "$providedName $providedArtist"
+            search(query)
+        }
+    }
 
     LaunchedEffect(state.isVisible, name, artist) {
         val query = "$name $artist"
         if (state.isVisible && viewState.lastQuery != query) {
-            viewModel.updateStage(BottomSheetStage.SEARCH)
-            viewModel.searchTracks(query)
+            search(query)
         }
     }
 
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/NoSongInformationProvided.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/NoSongInformationProvided.kt
new file mode 100644
index 0000000..f0dc688
--- /dev/null
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/NoSongInformationProvided.kt
@@ -0,0 +1,84 @@
+package com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.MoodBad
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.bobbyesp.metadator.R
+import com.bobbyesp.ui.components.text.PreConfiguredOutlinedTextField
+
+@Composable
+fun NoSongInformationProvided(
+    onRetrySearch: (String, String) -> Unit
+) {
+    val (name, setName) = remember { mutableStateOf("") }
+    val (artist, setArtist) = remember { mutableStateOf("") }
+    Column(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically)
+    ) {
+        Icon(
+            imageVector = Icons.Rounded.MoodBad,
+            contentDescription = stringResource(id = R.string.no_song_information_provided),
+            modifier = Modifier.size(48.dp),
+            tint = MaterialTheme.colorScheme.onSurface
+        )
+        Column(
+            modifier = Modifier.fillMaxWidth(0.9f),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = stringResource(id = R.string.no_song_information_provided),
+                style = MaterialTheme.typography.bodyMedium,
+                fontWeight = FontWeight.SemiBold
+            )
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                PreConfiguredOutlinedTextField(
+                    value = name,
+                    label = stringResource(id = R.string.title),
+                    modifier = Modifier.weight(0.5f)
+                ) { title ->
+                    setName(title)
+                }
+                Spacer(modifier = Modifier.width(8.dp))
+                PreConfiguredOutlinedTextField(
+                    value = artist,
+                    label = stringResource(id = R.string.artist),
+                    modifier = Modifier.weight(0.5f)
+                ) { artist ->
+                    setArtist(artist)
+                }
+            }
+        }
+        Button(
+            modifier = Modifier.fillMaxWidth(0.7f),
+            onClick = { onRetrySearch(name, artist) }
+        ) {
+            Text(
+                text = stringResource(id = R.string.retry_search),
+                style = MaterialTheme.typography.bodyMedium,
+                fontWeight = FontWeight.SemiBold
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsDetails.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsDetails.kt
index 451597c..35182c6 100644
--- a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsDetails.kt
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsDetails.kt
@@ -1,10 +1,13 @@
 package com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.stages
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -13,14 +16,15 @@ 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.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.adamratzman.spotify.models.Track
-import com.bobbyesp.metadator.presentation.components.cards.songs.spotify.SpotifyHorizontalSongCard
+import com.bobbyesp.metadator.ext.formatArtistsName
+import com.bobbyesp.metadator.presentation.components.image.ArtworkAsyncImage
 import com.bobbyesp.metadator.presentation.pages.utilities.tageditor.spotify.SpMetadataBottomSheetContentViewModel
+import com.bobbyesp.ui.components.text.MarqueeText
 
-@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 fun SpMetadataBsDetails(
     modifier: Modifier = Modifier,
@@ -44,15 +48,53 @@ fun SpMetadataBsDetails(
         LaunchedEffect(viewState.selectedTrack) {
             selectedTrack = viewState.selectedTrack
         }
-        selectedTrack?.let {
-            SpotifyHorizontalSongCard(
-                innerModifier = Modifier.padding(8.dp),
-                surfaceColor = Color.Transparent,
-                track = it,
-                onClick = {
-
-                }
+        selectedTrack?.let { track ->
+            TrackInfo(
+                track = track
             )
         }
     }
+}
+
+@Composable
+private fun TrackInfo(
+    modifier: Modifier = Modifier,
+    track: Track,
+) {
+    val albumArtPath = track.album.images?.getOrNull(0)?.url
+
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        ArtworkAsyncImage(
+            modifier = Modifier.size(64.dp),
+            artworkPath = albumArtPath,
+            shape = MaterialTheme.shapes.extraSmall
+        )
+        Row(
+            modifier = Modifier.weight(1f),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            Column(
+                horizontalAlignment = Alignment.Start,
+                modifier = Modifier
+                    .padding(8.dp)
+                    .weight(1f)
+            ) {
+                MarqueeText(
+                    text = track.name,
+                    style = MaterialTheme.typography.bodyLarge,
+                    fontWeight = FontWeight.Bold,
+                )
+                MarqueeText(
+                    text = track.artists.formatArtistsName(),
+                    style = MaterialTheme.typography.bodyMedium.copy(
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
+                    )
+                )
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsSearch.kt b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsSearch.kt
index 4649d30..558a7ca 100644
--- a/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsSearch.kt
+++ b/app/src/main/java/com/bobbyesp/metadator/presentation/pages/utilities/tageditor/spotify/stages/SpMetadataBsSearch.kt
@@ -47,33 +47,35 @@ fun SpMetadataBsSearch(
         state = listState,
         modifier = Modifier.fillMaxSize()
     ) {
-        stickyHeader {
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .background(
-                        brush = Brush.verticalGradient(
-                            colors = listOf(
-                                MaterialTheme.colorScheme.surfaceContainerLow, Color.Transparent
-                            ),
-                            startY = 0f,
+        if (name.isNotEmpty() && artist.isNotEmpty()) {
+            stickyHeader {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = listOf(
+                                    MaterialTheme.colorScheme.surfaceContainerLow, Color.Transparent
+                                ),
+                                startY = 0f,
+                            )
                         )
+                        .padding(8.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = stringResource(
+                            id = R.string.showing_results_for,
+                            name,
+                            artist
+                        ),
+                        style = MaterialTheme.typography.bodyMedium,
+                        textAlign = TextAlign.Center,
+                        fontWeight = FontWeight.Bold,
+                        modifier = Modifier
                     )
-                    .padding(8.dp),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.Center
-            ) {
-                Text(
-                    text = stringResource(
-                        id = R.string.showing_results_for,
-                        name,
-                        artist
-                    ),
-                    style = MaterialTheme.typography.bodyMedium,
-                    textAlign = TextAlign.Center,
-                    fontWeight = FontWeight.Bold,
-                    modifier = Modifier
-                )
+                }
             }
         }
 
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 4a7c65a..ff91cb1 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -62,5 +62,7 @@
     <string name="unknown">Unknown</string>
     <string name="showing_results_for">Showing results for %1$s by %2$s</string>
     <string name="loading">Loading</string>
+    <string name="no_song_information_provided">No song information provided</string>
+    <string name="retry_search">Retry search</string>
 
 </resources>
\ No newline at end of file
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/DropdownMenuImplementation.kt b/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/DropdownMenuImplementation.kt
index f07c3da..330f321 100644
--- a/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/DropdownMenuImplementation.kt
+++ b/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/DropdownMenuImplementation.kt
@@ -38,6 +38,10 @@ import androidx.compose.ui.util.fastMap
 import androidx.compose.ui.window.PopupPositionProvider
 import com.bobbyesp.ui.components.dropdown.MenuPosition.Horizontal
 import com.bobbyesp.ui.components.dropdown.MenuPosition.Vertical
+import com.bobbyesp.ui.motion.MotionConstants.DURATION_ENTER
+import com.bobbyesp.ui.motion.MotionConstants.DURATION_EXIT
+import com.bobbyesp.ui.motion.emphasizedAccelerate
+import com.bobbyesp.ui.motion.emphasizedDecelerate
 
 /**
  * Interfaces for positioning a menu within a window. This is the same purpose as the interface
@@ -420,7 +424,7 @@ fun DropdownMenuContent(
     AnimatedVisibility(
         visibleState = expandedState, label = "", enter = EnterTransition.None, exit = fadeOut(
             animationSpec = tween(
-                delayMillis = ExitDuration - FadeOutDuration,
+                delayMillis = DURATION_EXIT - FadeOutDuration,
                 durationMillis = FadeOutDuration,
                 easing = LinearEasing
             )
@@ -436,31 +440,31 @@ fun DropdownMenuContent(
             AnimatedVisibility(
                 visibleState = expandedState, label = "", enter = fadeIn(
                     animationSpec = tween(
-                        durationMillis = EnterDuration, easing = EmphasizedDecelerate
+                        durationMillis = DURATION_ENTER, easing = emphasizedDecelerate
                     )
                 ) + expandVertically(
                     animationSpec = tween(
-                        durationMillis = EnterDuration, easing = EmphasizedDecelerate
+                        durationMillis = DURATION_ENTER, easing = emphasizedDecelerate
                     ),
                     expandFrom = Alignment.Top,
                 ) + slideInVertically(
                     animationSpec = tween(
-                        durationMillis = EnterDuration, easing = EmphasizedDecelerate
+                        durationMillis = DURATION_ENTER, easing = emphasizedDecelerate
                     ),
                     initialOffsetY = { -it / 10 },
                 ), exit = fadeOut(
                     animationSpec = tween(
                         // Why ???
-                        durationMillis = ExitDuration - 20,
-                        easing = EmphasizedAccelerate
+                        durationMillis = DURATION_EXIT - 20,
+                        easing = emphasizedAccelerate
                     )
                 ) + shrinkVertically(
                     animationSpec = tween(
-                        durationMillis = ExitDuration, easing = EmphasizedAccelerate
+                        durationMillis = DURATION_EXIT, easing = emphasizedAccelerate
                     ),
                     shrinkTowards = Alignment.Top,
                 ) + slideOutVertically(animationSpec = tween(
-                    durationMillis = ExitDuration, easing = EmphasizedAccelerate
+                    durationMillis = DURATION_EXIT, easing = emphasizedAccelerate
                 ), targetOffsetY = { -it / 10 }), modifier = Modifier
             ) {
                 Column(
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/M3ElevationTokens.kt b/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/M3ElevationTokens.kt
index 5f6ac41..af31470 100644
--- a/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/M3ElevationTokens.kt
+++ b/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/M3ElevationTokens.kt
@@ -6,7 +6,6 @@ package com.bobbyesp.ui.components.dropdown
  * @see androidx.compose.material3.tokens.ElevationTokens
  */
 object ElevationTokens {
-
     const val Level0 = 0
     const val Level1 = 1
     const val Level2 = 3
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/MaterialEasing.kt b/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/MaterialEasing.kt
deleted file mode 100644
index be92ff7..0000000
--- a/app/ui/src/main/java/com/bobbyesp/ui/components/dropdown/MaterialEasing.kt
+++ /dev/null
@@ -1,9 +0,0 @@
-package com.bobbyesp.ui.components.dropdown
-
-import androidx.compose.animation.core.CubicBezierEasing
-
-val EmphasizedAccelerate = CubicBezierEasing(0.3f, 0f, 0.8f, 0.15f)
-val EmphasizedDecelerate = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
-
-const val EnterDuration = 400
-const val ExitDuration = 200
\ No newline at end of file
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/components/others/SelectableSurface.kt b/app/ui/src/main/java/com/bobbyesp/ui/components/others/SelectableSurface.kt
new file mode 100644
index 0000000..6172049
--- /dev/null
+++ b/app/ui/src/main/java/com/bobbyesp/ui/components/others/SelectableSurface.kt
@@ -0,0 +1,75 @@
+package com.bobbyesp.ui.components.others
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun SelectableSurface(
+    modifier: Modifier = Modifier,
+    isSelected: Boolean = false,
+    onSelected: () -> Unit = {},
+    content: @Composable () -> Unit
+) {
+    val animatedColor by animateColorAsState(
+        targetValue = selectColorHandler(isSelected), label = "Animated transition for color change"
+    )
+
+    Surface(
+        modifier = modifier.selectable(
+            selected = isSelected,
+            onClick = onSelected,
+            role = null
+        ), color = animatedColor
+    ) {
+        content()
+    }
+}
+
+@Composable
+private fun selectColorHandler(
+    isSelected: Boolean
+): Color {
+    return if (isSelected) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceVariant
+}
+
+@Preview
+@Composable
+fun SelectableSurfacePreview() {
+    MaterialTheme {
+        var selected by remember { mutableStateOf(false) }
+        SelectableSurface(
+            isSelected = selected,
+            onSelected = { selected = !selected }
+        ) {
+            Column(
+                modifier = Modifier
+                    .size(200.dp)
+                    .padding(12.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalAlignment = Alignment.Start
+            ) {
+                Text(text = "SelectableSurface", fontWeight = FontWeight.Bold)
+
+                Text(text = "This is just a test to see how this should work. Lol this is a very long text don't you think? I think so.")
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt b/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt
index 55d0421..f52294b 100644
--- a/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt
+++ b/app/ui/src/main/java/com/bobbyesp/ui/components/text/PreConfiguredOutlinedTextField.kt
@@ -15,12 +15,11 @@ import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import com.bobbyesp.ui.R
+import com.bobbyesp.ui.util.rememberSaveableWithVolatileInitialValue
 
 @Composable
 fun PreConfiguredOutlinedTextField(
@@ -36,7 +35,7 @@ fun PreConfiguredOutlinedTextField(
     minLines: Int = 1,
     returnModifiedValue: (String) -> Unit = {}
 ) {
-    val (text, setText) = remember(value) { mutableStateOf(value) }
+    val (text, setText) = rememberSaveableWithVolatileInitialValue(value)
 
     SideEffect {
         if (!text.isNullOrEmpty()) returnModifiedValue(text) else returnModifiedValue("")
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/util/AppBarUtils.kt b/app/ui/src/main/java/com/bobbyesp/ui/util/AppBar.kt
similarity index 100%
rename from app/ui/src/main/java/com/bobbyesp/ui/util/AppBarUtils.kt
rename to app/ui/src/main/java/com/bobbyesp/ui/util/AppBar.kt
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/util/ComposeDebugUtils.kt b/app/ui/src/main/java/com/bobbyesp/ui/util/Compose.kt
similarity index 100%
rename from app/ui/src/main/java/com/bobbyesp/ui/util/ComposeDebugUtils.kt
rename to app/ui/src/main/java/com/bobbyesp/ui/util/Compose.kt
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt b/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt
index 0d516c1..38c878e 100644
--- a/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt
+++ b/app/ui/src/main/java/com/bobbyesp/ui/util/RememberSaveableWithInitialValue.kt
@@ -16,9 +16,9 @@ import androidx.compose.runtime.saveable.rememberSaveable
  * (i.e. while this composable is not active).
  */
 @Composable
-fun <T : Any> rememberSaveableWithVolatileInitialValue(
-    initialValue: T
-): MutableState<T> {
+fun <T : Any?> rememberSaveableWithVolatileInitialValue(
+    initialValue: T?
+): MutableState<T?> {
     return key(initialValue) {
         rememberSaveable {
             mutableStateOf(initialValue)
diff --git a/app/ui/src/main/java/com/bobbyesp/ui/util/ScrollUtilities.kt b/app/ui/src/main/java/com/bobbyesp/ui/util/Scroll.kt
similarity index 76%
rename from app/ui/src/main/java/com/bobbyesp/ui/util/ScrollUtilities.kt
rename to app/ui/src/main/java/com/bobbyesp/ui/util/Scroll.kt
index d604219..4408ed8 100644
--- a/app/ui/src/main/java/com/bobbyesp/ui/util/ScrollUtilities.kt
+++ b/app/ui/src/main/java/com/bobbyesp/ui/util/Scroll.kt
@@ -6,14 +6,14 @@ import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 
 @Composable
 fun LazyListState.isScrollingUp(): Boolean {
-    var previousIndex by remember(this) { mutableStateOf(firstVisibleItemIndex) }
-    var previousScrollOffset by remember(this) { mutableStateOf(firstVisibleItemScrollOffset) }
+    var previousIndex by remember(this) { mutableIntStateOf(firstVisibleItemIndex) }
+    var previousScrollOffset by remember(this) { mutableIntStateOf(firstVisibleItemScrollOffset) }
     return remember(this) {
         derivedStateOf {
             if (previousIndex != firstVisibleItemIndex) {
@@ -30,8 +30,8 @@ fun LazyListState.isScrollingUp(): Boolean {
 
 @Composable
 fun LazyGridState.isScrollingUp(): Boolean {
-    var previousIndex by remember(this) { mutableStateOf(firstVisibleItemIndex) }
-    var previousScrollOffset by remember(this) { mutableStateOf(firstVisibleItemScrollOffset) }
+    var previousIndex by remember(this) { mutableIntStateOf(firstVisibleItemIndex) }
+    var previousScrollOffset by remember(this) { mutableIntStateOf(firstVisibleItemScrollOffset) }
     return remember(this) {
         derivedStateOf {
             if (previousIndex != firstVisibleItemIndex) {
@@ -48,7 +48,7 @@ fun LazyGridState.isScrollingUp(): Boolean {
 
 @Composable
 fun ScrollState.isScrollingUp(): Boolean {
-    var previousScrollOffset by remember(this) { mutableStateOf(value) }
+    var previousScrollOffset by remember(this) { mutableIntStateOf(value) }
     return remember(this) {
         derivedStateOf {
             (previousScrollOffset >= value).also {