Different view types | List | Grid | Compat

app/src/main/java/com/yogeshpaliyal/deepr/preference/AppPreferenceDataStore.kt

@@ -5,9 +5,11 @@ import androidx.datastore.core.DataStore
 import androidx.datastore.preferences.core.Preferences
 import androidx.datastore.preferences.core.booleanPreferencesKey
 import androidx.datastore.preferences.core.edit
+import androidx.datastore.preferences.core.intPreferencesKey
 import androidx.datastore.preferences.core.longPreferencesKey
 import androidx.datastore.preferences.core.stringPreferencesKey
 import androidx.datastore.preferences.preferencesDataStore
+import com.yogeshpaliyal.deepr.ui.screens.home.ViewType
 import com.yogeshpaliyal.deepr.viewmodel.SortType
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.map
@@ -31,13 +33,19 @@ class AppPreferenceDataStore(
         private val DEFAULT_PAGE_FAVOURITES = booleanPreferencesKey("default_page_favourites")
         private val IS_THUMBNAIL_ENABLE = booleanPreferencesKey("is_thumbnail_enable")
         private val SERVER_PORT = stringPreferencesKey("server_port")
+        private val VIEW_TYPE = intPreferencesKey("view_type")
     }
 
     val getSortingOrder: Flow<@SortType String> =
         context.appDataStore.data.map { preferences ->
             preferences[SORTING_ORDER] ?: SortType.SORT_CREATED_BY_DESC
         }
 
+    val viewType: Flow<@ViewType Int> =
+        context.appDataStore.data.map { preferences ->
+            preferences[VIEW_TYPE] ?: ViewType.LIST
+        }
+
     val getUseLinkBasedIcons: Flow<Boolean> =
         context.appDataStore.data.map { preferences ->
             preferences[USE_LINK_BASED_ICONS] ?: true // Default to link-based icons
@@ -111,6 +119,12 @@ class AppPreferenceDataStore(
         }
     }
 
+    suspend fun setViewType(viewType: @ViewType Int) {
+        context.appDataStore.edit { prefs ->
+            prefs[VIEW_TYPE] = viewType
+        }
+    }
+
     suspend fun setSyncFilePath(path: String) {
         context.appDataStore.edit { prefs ->
             prefs[SYNC_FILE_PATH] = path

app/src/main/java/com/yogeshpaliyal/deepr/ui/ColorsUtils.kt

@@ -0,0 +1,13 @@
+package com.yogeshpaliyal.deepr.ui
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+@Composable
+fun getDeeprItemBackgroundColor(isFavourite: Long): Color =
+    if (isFavourite == 1L) MaterialTheme.colorScheme.surfaceContainerHighest else MaterialTheme.colorScheme.surfaceContainer
+
+@Composable
+fun getDeeprItemTextColor(isFavourite: Long): Color =
+    if (isFavourite == 1L) MaterialTheme.colorScheme.onSurface else MaterialTheme.colorScheme.onSurfaceVariant

app/src/main/java/com/yogeshpaliyal/deepr/ui/screens/home/DeeprItem.kt

@@ -8,19 +8,16 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 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.rounded.Star
 import androidx.compose.material.icons.rounded.StarBorder
@@ -30,38 +27,30 @@ import androidx.compose.material3.FilterChip
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SwipeToDismissBox
-import androidx.compose.material3.SwipeToDismissBoxDefaults
-import androidx.compose.material3.SwipeToDismissBoxValue
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberSwipeToDismissBoxState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import com.yogeshpaliyal.deepr.GetLinksAndTags
 import com.yogeshpaliyal.deepr.R
 import com.yogeshpaliyal.deepr.Tags
+import com.yogeshpaliyal.deepr.ui.getDeeprItemBackgroundColor
+import com.yogeshpaliyal.deepr.ui.getDeeprItemTextColor
 import compose.icons.TablerIcons
 import compose.icons.tablericons.DotsVertical
-import compose.icons.tablericons.Edit
-import compose.icons.tablericons.Trash
-import kotlinx.coroutines.launch
 import java.text.DateFormat
 import java.text.SimpleDateFormat
 import java.util.Locale
@@ -74,6 +63,10 @@ sealed class MenuItem(
         item: GetLinksAndTags,
     ) : MenuItem(item)
 
+    class Copy(
+        item: GetLinksAndTags,
+    ) : MenuItem(item)
+
     class Shortcut(
         item: GetLinksAndTags,
     ) : MenuItem(item)
@@ -103,23 +96,6 @@ sealed class MenuItem(
     ) : MenuItem(item)
 }
 
-@Composable
-@Preview
-private fun DeeprItemPreview() {
-    DeeprItem(
-        account =
-            createDeeprObject(
-                name = "Yogesh Paliyal",
-                link = "https://yogeshpaliyal.com",
-                thumbnail = "https://yogeshpaliyal.com/og.png",
-            ),
-        {},
-        {},
-        listOf(),
-        isThumbnailEnable = true,
-    )
-}
-
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun DeeprItem(
@@ -138,94 +114,11 @@ fun DeeprItem(
 
     val linkCopied = stringResource(R.string.link_copied)
 
-    val dismissState =
-        rememberSwipeToDismissBoxState(
-            initialValue = SwipeToDismissBoxValue.Settled,
-            positionalThreshold = SwipeToDismissBoxDefaults.positionalThreshold,
-        )
-
-    val scope = rememberCoroutineScope()
-
-    SwipeToDismissBox(
-        modifier =
-            modifier
-                .fillMaxSize()
-                .clip(RoundedCornerShape(8.dp)),
-        state = dismissState,
-        onDismiss = {
-            scope.launch {
-                dismissState.reset()
-            }
-            when (it) {
-                SwipeToDismissBoxValue.EndToStart -> {
-                    onItemClick(MenuItem.Delete(account))
-                    false
-                }
-
-                SwipeToDismissBoxValue.StartToEnd -> {
-                    onItemClick(MenuItem.Edit(account))
-                    false
-                }
-
-                else -> {
-                    false
-                }
-            }
-        },
-        backgroundContent = {
-            when (dismissState.dismissDirection) {
-                SwipeToDismissBoxValue.StartToEnd -> {
-                    Box(
-                        modifier =
-                            Modifier
-                                .background(
-                                    Color.Gray.copy(alpha = 0.5f),
-                                ).fillMaxSize()
-                                .clip(
-                                    RoundedCornerShape(8.dp),
-                                ),
-                        contentAlignment = Alignment.CenterStart,
-                    ) {
-                        Icon(
-                            imageVector = TablerIcons.Edit,
-                            contentDescription = stringResource(R.string.edit),
-                            tint = Color.White,
-                            modifier = Modifier.padding(16.dp),
-                        )
-                    }
-                }
-
-                SwipeToDismissBoxValue.EndToStart -> {
-                    Box(
-                        modifier =
-                            Modifier
-                                .background(
-                                    Color.Red.copy(alpha = 0.5f),
-                                ).fillMaxSize()
-                                .clip(
-                                    RoundedCornerShape(8.dp),
-                                ),
-                        contentAlignment = Alignment.CenterEnd,
-                    ) {
-                        Icon(
-                            imageVector = TablerIcons.Trash,
-                            contentDescription = stringResource(R.string.delete),
-                            tint = Color.White,
-                            modifier = Modifier.padding(16.dp),
-                        )
-                    }
-                }
-
-                else -> {
-                    Color.White
-                }
-            }
-        },
-    ) {
+    DeeprItemSwipable(account, onItemClick, modifier) {
         Card(
             colors =
                 CardDefaults.cardColors(
-                    containerColor = MaterialTheme.colorScheme.surfaceContainerHighest,
+                    containerColor = getDeeprItemBackgroundColor(account.isFavourite),
                 ),
             modifier =
                 Modifier
@@ -278,20 +171,22 @@ fun DeeprItem(
                                 maxLines = 1,
                                 overflow = TextOverflow.Ellipsis,
                                 style = MaterialTheme.typography.labelLarge,
+                                color = getDeeprItemTextColor(account.isFavourite),
                             )
                         }
                         Text(
                             text = account.link,
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis,
                             style = MaterialTheme.typography.bodySmall,
+                            color = getDeeprItemTextColor(account.isFavourite),
                         )
                         Spacer(modifier = Modifier.height(4.dp))
                         Row(verticalAlignment = Alignment.CenterVertically) {
                             Text(
                                 text = formatDateTime(account.createdAt),
                                 style = MaterialTheme.typography.bodySmall,
-                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                color = getDeeprItemTextColor(account.isFavourite),
                             )
                         }
                     }
@@ -313,12 +208,7 @@ fun DeeprItem(
                                         } else {
                                             stringResource(R.string.add_to_favourites)
                                         },
-                                    tint =
-                                        if (account.isFavourite == 1L) {
-                                            MaterialTheme.colorScheme.primary
-                                        } else {
-                                            MaterialTheme.colorScheme.onSurface
-                                        },
+                                    tint = getDeeprItemTextColor(account.isFavourite),
                                     modifier = Modifier.size(28.dp),
                                 )
                             }
@@ -340,7 +230,7 @@ fun DeeprItem(
                         Text(
                             text = stringResource(R.string.opened_count, account.openedCount),
                             style = MaterialTheme.typography.bodySmall,
-                            color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            color = getDeeprItemTextColor(account.isFavourite),
                         )
                     }
                 }