Update Playlist Configuration layout.

Author: oxy

feature/playlist-configuration/src/main/java/com/m3u/feature/playlist/configuration/PlaylistConfigurationScreen.kt

@@ -15,14 +15,15 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Save
 import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -54,10 +55,12 @@ import com.m3u.material.components.Background
 import com.m3u.material.components.Icon
 import com.m3u.material.components.PlaceholderField
 import com.m3u.material.ktx.checkPermissionOrRationale
-import com.m3u.material.ktx.split
+import com.m3u.material.model.LocalHazeState
 import com.m3u.material.model.LocalSpacing
 import com.m3u.ui.helper.LocalHelper
 import com.m3u.ui.helper.Metadata
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.haze
 import kotlinx.datetime.LocalDateTime
 
 @Composable
@@ -144,60 +147,72 @@ private fun PlaylistConfigurationScreen(
     }
     Background(modifier) {
         Box {
-            val (outer, inner) = contentPadding split WindowInsetsSides.Top
-            Column(
+            LazyColumn(
                 verticalArrangement = Arrangement.spacedBy(spacing.small),
+                contentPadding = contentPadding,
                 modifier = Modifier
-                    .padding(outer)
+                    .haze(
+                        LocalHazeState.current,
+                        HazeStyle(MaterialTheme.colorScheme.surface)
+                    )
                     .padding(spacing.medium)
             ) {
-                PlaceholderField(
-                    text = title,
-                    placeholder = stringResource(string.feat_playlist_configuration_title).title(),
-                    onValueChange = { title = it },
-                )
-                PlaceholderField(
-                    text = userAgent,
-                    placeholder = stringResource(string.feat_playlist_configuration_user_agent).title(),
-                    onValueChange = { userAgent = it }
-                )
-                AnimatedVisibility(playlist.epgUrlsOrXtreamXmlUrl().isNotEmpty()) {
-                    Column(
-                        verticalArrangement = Arrangement.spacedBy(spacing.small)
-                    ) {
-                        SyncProgrammesButton(
-                            subscribingOrRefreshing = subscribingOrRefreshing,
-                            expired = expired,
-                            onSyncProgrammes = onSyncProgrammes
-                        )
-                        AutoSyncProgrammesButton(
-                            checked = playlist.autoRefreshProgrammes,
-                            onCheckedChange = onUpdatePlaylistAutoRefreshProgrammes
-                        )
+                item {
+                    PlaceholderField(
+                        text = title,
+                        placeholder = stringResource(string.feat_playlist_configuration_title).title(),
+                        onValueChange = { title = it },
+                    )
+                }
+
+                item {
+                    PlaceholderField(
+                        text = userAgent,
+                        placeholder = stringResource(string.feat_playlist_configuration_user_agent).title(),
+                        onValueChange = { userAgent = it }
+                    )
+                }
+
+                item {
+                    AnimatedVisibility(playlist.epgUrlsOrXtreamXmlUrl().isNotEmpty()) {
+                        Column(
+                            verticalArrangement = Arrangement.spacedBy(spacing.small)
+                        ) {
+                            SyncProgrammesButton(
+                                subscribingOrRefreshing = subscribingOrRefreshing,
+                                expired = expired,
+                                onSyncProgrammes = onSyncProgrammes
+                            )
+                            AutoSyncProgrammesButton(
+                                checked = playlist.autoRefreshProgrammes,
+                                onCheckedChange = onUpdatePlaylistAutoRefreshProgrammes
+                            )
+                        }
                     }
                 }
+
                 if (playlist.source == DataSource.M3U) {
                     EpgManifestGallery(
                         playlistUrl = playlist.url,
                         manifest = manifest,
-                        contentPadding = inner,
-                        onUpdateEpgPlaylist = onUpdateEpgPlaylist,
-                        modifier = Modifier.fillMaxWidth()
+                        onUpdateEpgPlaylist = onUpdateEpgPlaylist
                     )
                 }
 
                 if (playlist.source == DataSource.Xtream) {
-                    XtreamPanel(
-                        info = xtreamUserInfo,
-                        modifier = Modifier.fillMaxWidth()
-                    )
+                    item {
+                        XtreamPanel(
+                            info = xtreamUserInfo,
+                            modifier = Modifier.fillMaxWidth()
+                        )
+                    }
                 }
             }
 
             val fabBottomPadding by animateDpAsState(
                 targetValue = maxOf(
                     WindowInsets.ime.asPaddingValues().calculateBottomPadding(),
-                    inner.calculateBottomPadding()
+                    contentPadding.calculateBottomPadding()
                 ),
                 label = "apply changes bottom padding"
             )

feature/playlist-configuration/src/main/java/com/m3u/feature/playlist/configuration/components/EpgManifestGallery.kt

@@ -3,12 +3,9 @@ package com.m3u.feature.playlist.configuration.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.ListItemDefaults
@@ -28,25 +25,16 @@ import com.m3u.data.repository.playlist.PlaylistRepository
 import com.m3u.feature.playlist.configuration.EpgManifest
 import com.m3u.i18n.R.string
 import com.m3u.material.components.SelectionsDefaults
-import com.m3u.material.model.LocalHazeState
 import com.m3u.material.model.LocalSpacing
 import com.m3u.material.shape.AbsoluteSmoothCornerShape
-import dev.chrisbanes.haze.HazeDefaults
-import dev.chrisbanes.haze.haze
 
-@Composable
-internal fun EpgManifestGallery(
+internal fun LazyListScope.EpgManifestGallery(
     playlistUrl: String,
     manifest: EpgManifest,
-    contentPadding: PaddingValues,
-    onUpdateEpgPlaylist: (PlaylistRepository.UpdateEpgPlaylistUseCase) -> Unit,
-    modifier: Modifier = Modifier
+    onUpdateEpgPlaylist: (PlaylistRepository.UpdateEpgPlaylistUseCase) -> Unit
 ) {
-    val spacing = LocalSpacing.current
-    Column(
-        verticalArrangement = Arrangement.spacedBy(spacing.medium),
-        modifier = modifier
-    ) {
+    stickyHeader {
+        val spacing = LocalSpacing.current
         Text(
             text = stringResource(string.feat_playlist_configuration_enabled_epgs).title(),
             style = MaterialTheme.typography.titleMedium,
@@ -58,25 +46,14 @@ internal fun EpgManifestGallery(
                     vertical = spacing.small
                 )
         )
-        LazyColumn(
-            contentPadding = contentPadding,
-            verticalArrangement = Arrangement.spacedBy(spacing.medium),
-            modifier = Modifier
-                .haze(
-                    LocalHazeState.current,
-                    HazeDefaults.style(MaterialTheme.colorScheme.surface)
-                )
-                .fillMaxWidth()
-        ) {
-            items(manifest.entries.toList()) { (epg, associated) ->
-                EpgManifestGalleryItem(
-                    playlistUrl = playlistUrl,
-                    epg = epg,
-                    associated = associated,
-                    onUpdateEpgPlaylist = onUpdateEpgPlaylist,
-                )
-            }
-        }
+    }
+    items(manifest.entries.toList()) { (epg, associated) ->
+        EpgManifestGalleryItem(
+            playlistUrl = playlistUrl,
+            epg = epg,
+            associated = associated,
+            onUpdateEpgPlaylist = onUpdateEpgPlaylist,
+        )
     }
 }