feature: Rework files screen (#194)

* feature: Shared pref

* fix: Checkbox

* feature: Rework files

---------

Co-authored-by: TEYSSANDIER Raphael <rteyssandier@sephora.fr>

FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FileItemRow.kt

@@ -16,6 +16,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import io.github.openflocon.flocondesktop.common.ui.ContextualItem
@@ -24,6 +25,7 @@ import io.github.openflocon.flocondesktop.features.files.model.FilePathUiModel
 import io.github.openflocon.flocondesktop.features.files.model.FileTypeUiModel
 import io.github.openflocon.flocondesktop.features.files.model.FileUiModel
 import io.github.openflocon.library.designsystem.FloconTheme
+import io.github.openflocon.library.designsystem.components.FloconIcon
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
@@ -34,7 +36,7 @@ fun FileItemRow(
     modifier: Modifier = Modifier,
 ) {
     ContextualView(
-        file.contextualActions.map { action ->
+        items = file.contextualActions.map { action ->
             ContextualItem(
                 text = action.text,
                 onClick = {
@@ -47,29 +49,27 @@ fun FileItemRow(
         },
     ) {
         Row(
-            modifier =
-            modifier
-                .clickable {
-                    onClick(file)
-                }.padding(vertical = 8.dp, horizontal = 16.dp),
+            modifier = modifier
+                .clip(FloconTheme.shapes.medium)
+                .clickable { onClick(file) }
+                .padding(vertical = 8.dp, horizontal = 16.dp),
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            Icon(
+            FloconIcon(
                 imageVector = file.icon,
-                modifier = Modifier.size(24.dp),
-                tint = FloconTheme.colorPalette.onSurface,
-                contentDescription = null,
+                modifier = Modifier.size(24.dp)
             )
 
             Spacer(modifier = Modifier.width(16.dp))
 
             // Nom du fichier/dossier
-            Column(modifier = Modifier.weight(1f)) {
+            Column(
+                modifier = Modifier.weight(1f)
+            ) {
                 Text(
                     text = file.name,
                     style = FloconTheme.typography.bodyLarge,
                     maxLines = 1,
-                    color = FloconTheme.colorPalette.onSurface,
                     overflow = TextOverflow.Ellipsis,
                 )
                 // Informations additionnelles (taille, date de modification)
@@ -92,7 +92,7 @@ fun FileItemRow(
                 Icon(
                     imageVector = Icons.Outlined.ChevronRight,
                     modifier = Modifier.size(24.dp),
-                    tint = FloconTheme.colorPalette.onSurface,
+                    tint = FloconTheme.colorPalette.onPrimary,
                     contentDescription = null,
                 )
             }

FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesScreen.kt

@@ -1,16 +1,20 @@
 package io.github.openflocon.flocondesktop.features.files.view
 
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import io.github.openflocon.flocondesktop.features.files.FilesViewModel
@@ -18,7 +22,9 @@ import io.github.openflocon.flocondesktop.features.files.model.FileUiModel
 import io.github.openflocon.flocondesktop.features.files.model.FilesStateUiModel
 import io.github.openflocon.flocondesktop.features.files.model.previewFilesStateUiModel
 import io.github.openflocon.library.designsystem.FloconTheme
-import io.github.openflocon.library.designsystem.components.FloconSurface
+import io.github.openflocon.library.designsystem.components.FloconFeature
+import io.github.openflocon.library.designsystem.components.FloconVerticalScrollbar
+import io.github.openflocon.library.designsystem.components.rememberFloconScrollbarAdapter
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import org.koin.compose.viewmodel.koinViewModel
 
@@ -54,20 +60,31 @@ private fun FilesScreen(
     onContextualAction: (FileUiModel, FileUiModel.ContextualAction.Action) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    FloconSurface(modifier = modifier) {
-        Column(modifier = Modifier.fillMaxSize()) {
-            FilesTopBar(
-                modifier = Modifier.fillMaxWidth(),
-                current = state.current,
-                onBack = onNavigateUp,
-                onRefresh = onRefresh,
-                onDeleteContent = onDeleteContent,
-            )
+    val listState = rememberLazyListState()
+    val scrollAdapter = rememberFloconScrollbarAdapter(listState)
+
+    FloconFeature(
+        modifier = modifier.fillMaxSize()
+    ) {
+        FilesTopBar(
+            modifier = Modifier.fillMaxWidth(),
+            current = state.current,
+            onBack = onNavigateUp,
+            onRefresh = onRefresh,
+            onDeleteContent = onDeleteContent,
+        )
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .clip(FloconTheme.shapes.medium)
+                .background(FloconTheme.colorPalette.primary)
+        ) {
             LazyColumn(
-                modifier = Modifier.fillMaxWidth(),
-                contentPadding = PaddingValues(
-                    vertical = 12.dp,
-                ),
+                state = listState,
+                modifier = Modifier
+                    .weight(1f)
+                    .fillMaxHeight(),
+                contentPadding = PaddingValues(8.dp),
             ) {
                 itemsIndexed(state.files) { index, item ->
                     FileItemRow(
@@ -81,6 +98,10 @@ private fun FilesScreen(
                     }
                 }
             }
+            FloconVerticalScrollbar(
+                adapter = scrollAdapter,
+                modifier = Modifier.fillMaxHeight()
+            )
         }
     }
 }

FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/files/view/FilesTopBar.kt

@@ -1,34 +1,23 @@
 package io.github.openflocon.flocondesktop.features.files.view
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.outlined.Delete
 import androidx.compose.material.icons.outlined.Folder
 import androidx.compose.material.icons.outlined.Refresh
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
 import io.github.openflocon.flocondesktop.features.files.model.FilePathUiModel
 import io.github.openflocon.flocondesktop.features.files.model.FileTypeUiModel
 import io.github.openflocon.flocondesktop.features.files.model.FileUiModel
 import io.github.openflocon.library.designsystem.FloconTheme
+import io.github.openflocon.library.designsystem.components.FloconIcon
 import io.github.openflocon.library.designsystem.components.FloconIconButton
+import io.github.openflocon.library.designsystem.components.FloconIconTonalButton
 import io.github.openflocon.library.designsystem.components.FloconPageTopBar
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
@@ -46,24 +35,24 @@ fun FilesTopBar(
     FloconPageTopBar(
         modifier = modifier,
         filterBar = {
-            TopBarButton(
+            FloconIconTonalButton(
                 onClick = onBack,
                 enabled = hasParentFile,
-                icon = Icons.AutoMirrored.Filled.ArrowBack,
-            )
-            Box(
-                modifier = Modifier.weight(1f)
-                    .clip(RoundedCornerShape(6.dp))
-                    .background(FloconTheme.colorPalette.onSurface.copy(alpha = 0.1f))
-                    .padding(vertical = 4.dp, horizontal = 12.dp),
+                containerColor = FloconTheme.colorPalette.secondary
             ) {
-                Text(
-                    current?.name ?: "",
-                    style = FloconTheme.typography.bodyLarge,
-                    maxLines = 1,
-                    color = FloconTheme.colorPalette.onSurface,
+                FloconIcon(
+                    imageVector = Icons.AutoMirrored.Filled.ArrowBack
                 )
             }
+            Text(
+                text = current?.name.orEmpty(),
+                style = FloconTheme.typography.bodyLarge,
+                maxLines = 1,
+                color = FloconTheme.colorPalette.onPrimary,
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(vertical = 4.dp, horizontal = 12.dp),
+            )
         },
         actions = {
             FloconIconButton(
@@ -80,35 +69,6 @@ fun FilesTopBar(
     )
 }
 
-@Composable
-private fun TopBarButton(
-    onClick: () -> Unit,
-    enabled: Boolean,
-    icon: ImageVector,
-) {
-    Box(
-        modifier = Modifier.size(32.dp)
-            .clip(RoundedCornerShape(6.dp))
-            .background(FloconTheme.colorPalette.onSurface.copy(alpha = 0.1f))
-            .clickable(onClick = onClick, enabled = enabled)
-            .padding(6.dp)
-            .graphicsLayer {
-                alpha = if (enabled) {
-                    1f
-                } else {
-                    0.5f
-                }
-            },
-    ) {
-        Icon(
-            imageVector = icon,
-            modifier = Modifier.fillMaxSize(),
-            tint = FloconTheme.colorPalette.onSurface,
-            contentDescription = null,
-        )
-    }
-}
-
 @Preview
 @Composable
 private fun FilesTopBarPreview_noParent() {