Move article status filter to bottom of feed list

app/src/main/java/com/capyreader/app/ui/articles/AddFeedButton.kt

@@ -3,40 +3,59 @@ package com.capyreader.app.ui.articles
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.rounded.Add
+import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.SmallFloatingActionButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.capyreader.app.R
 
 @Composable
 fun AddFeedButton(
     onComplete: (feedID: String) -> Unit,
+    iconOnly: Boolean = false,
 ) {
     val (isDialogOpen, setDialogOpen) = rememberSaveable { mutableStateOf(false) }
 
     val closeDialog = {
         setDialogOpen(false)
     }
 
-    OutlinedButton(
-        onClick = { setDialogOpen(true) },
-    ) {
-        Box(Modifier.padding(end = 8.dp)) {
+    val onClick = { setDialogOpen(true) }
+
+    if (iconOnly) {
+        SmallFloatingActionButton(
+            onClick = onClick,
+            shape = CircleShape,
+            elevation = FloatingActionButtonDefaults.elevation(defaultElevation = 0.dp)
+        ) {
             Icon(
-                imageVector = Icons.Filled.Add,
-                contentDescription = null,
-                modifier = Modifier.size(18.dp)
+                imageVector = Icons.Rounded.Add,
+                contentDescription = stringResource(R.string.nav_add_feed)
             )
         }
-        Text(stringResource(R.string.nav_add_feed))
+    } else {
+        OutlinedButton(onClick = onClick) {
+            Box(Modifier.padding(end = 8.dp)) {
+                Icon(
+                    imageVector = Icons.Filled.Add,
+                    contentDescription = null,
+                    modifier = Modifier.size(18.dp)
+                )
+            }
+            Text(stringResource(R.string.nav_add_feed))
+        }
     }
 
     if (isDialogOpen) {
@@ -49,3 +68,12 @@ fun AddFeedButton(
         )
     }
 }
+
+@Composable
+@Preview
+fun AddFeedButtonPreview() {
+    AddFeedButton(
+        onComplete = {},
+        iconOnly = true
+    )
+}

app/src/main/java/com/capyreader/app/ui/articles/ArticleLayout.kt

@@ -269,6 +269,38 @@ fun ArticleLayout(
         }
     }
 
+    fun selectFilter() {
+        if (!filter.hasArticlesSelected()) {
+            openNextList { onSelectArticleFilter() }
+        } else {
+            closeDrawer()
+        }
+    }
+
+    fun selectStatus(status: ArticleStatus) {
+        coroutineScope.launchUI {
+            openNextStatus { onSelectStatus(status) }
+        }
+    }
+
+    fun selectFeed(feed: Feed, folderTitle: String?) {
+        coroutineScope.launch {
+            if (!filter.isFeedSelected(feed)) {
+                openNextList { onSelectFeed(feed.id, folderTitle) }
+            } else {
+                closeDrawer()
+            }
+        }
+    }
+
+    fun selectFolder(folder: Folder) {
+        if (!filter.isFolderSelect(folder)) {
+            openNextList { onSelectFolder(folder.title) }
+        } else {
+            closeDrawer()
+        }
+    }
+
     ArticleHandler {
         selectArticle(it)
     }
@@ -280,38 +312,14 @@ fun ArticleLayout(
             FeedList(
                 folders = folders,
                 feeds = feeds,
-                onSelectFolder = {
-                    if (!filter.isFolderSelect(it)) {
-                        openNextList { onSelectFolder(it.title) }
-                    } else {
-                        closeDrawer()
-                    }
-                },
-                onSelectFeed = { feed, folderTitle ->
-                    coroutineScope.launch {
-                        if (!filter.isFeedSelected(feed)) {
-                            openNextList { onSelectFeed(feed.id, folderTitle) }
-                        } else {
-                            closeDrawer()
-                        }
-                    }
-                },
+                onSelectFolder = ::selectFolder,
+                onSelectFeed = ::selectFeed,
                 onFeedAdded = { onFeedAdded(it) },
                 onNavigateToSettings = onNavigateToSettings,
-                onFilterSelect = {
-                    if (!filter.hasArticlesSelected()) {
-                        openNextList { onSelectArticleFilter() }
-                    } else {
-                        closeDrawer()
-                    }
-                },
+                onFilterSelect = ::selectFilter,
                 filter = filter,
                 statusCount = statusCount,
-                onSelectStatus = {
-                    coroutineScope.launchUI {
-                        openNextStatus { onSelectStatus(it) }
-                    }
-                }
+                onSelectStatus = ::selectStatus
             )
         },
         listPane = {

app/src/main/java/com/capyreader/app/ui/articles/ArticleStatusBar.kt

@@ -0,0 +1,42 @@
+package com.capyreader.app.ui.articles
+
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.jocmp.capy.ArticleStatus
+
+@Composable
+fun ArticleStatusBar(
+    onSelectStatus: (status: ArticleStatus) -> Unit,
+    status: ArticleStatus,
+) {
+    SingleChoiceSegmentedButtonRow {
+        options.forEachIndexed { index, buttonStatus ->
+            SegmentedButton(
+                shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
+                onClick = { onSelectStatus(buttonStatus) },
+                icon = {},
+                selected = buttonStatus == status
+            ) {
+                ArticleStatusIcon(status = buttonStatus)
+            }
+        }
+    }
+}
+
+val options = listOf(
+    ArticleStatus.ALL,
+    ArticleStatus.UNREAD,
+    ArticleStatus.STARRED,
+)
+
+@Composable
+@Preview
+fun ArticleStatusBarPreview() {
+    ArticleStatusBar(
+        onSelectStatus = {},
+        status = ArticleStatus.UNREAD
+    )
+}

app/src/main/java/com/capyreader/app/ui/articles/ArticleStatusIcon.kt

@@ -1,14 +1,11 @@
 package com.capyreader.app.ui.articles
 
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.Notes
 import androidx.compose.material.icons.rounded.Star
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.unit.dp
 import com.capyreader.app.R
 import com.jocmp.capy.ArticleStatus
 
@@ -23,7 +20,6 @@ fun ArticleStatusIcon(status: ArticleStatus) {
         ArticleStatus.UNREAD -> Icon(
             painterResource(R.drawable.icon_circle_filled),
             contentDescription = null,
-            modifier = Modifier.padding(1.dp)
         )
 
         ArticleStatus.STARRED -> Icon(

app/src/main/java/com/capyreader/app/ui/articles/FeedList.kt

@@ -10,19 +10,17 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationDrawerItem
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 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.tooling.preview.Preview
@@ -70,30 +68,26 @@ fun FeedList(
         ) {
             Row(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(vertical = 8.dp),
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
             ) {
-                TextButton(
-                    onClick = { setMenuExpanded(true) },
-                ) {
-                    Text(
-                        stringResource(articleStatus.navigationTitle),
-                        style = MaterialTheme.typography.titleLarge
+                Text(
+                    stringResource(R.string.feed_nav_drawer_title),
+                    style = MaterialTheme.typography.titleLarge,
+                    modifier = Modifier
+                        .padding(
+                            vertical = 24.dp,
+                            horizontal = 12.dp
+                        ),
+                )
+                IconButton(onClick = { onNavigateToSettings() }) {
+                    Icon(
+                        imageVector = Icons.Filled.Settings,
+                        contentDescription = stringResource(R.string.settings)
                     )
-                    Box(Modifier.padding(start = 8.dp)) {
-                        Icon(
-                            imageVector = Icons.Filled.ArrowDropDown,
-                            contentDescription = null,
-                        )
-                    }
                 }
-                ArticleFilterMenu(
-                    expanded = isMenuExpanded,
-                    onDismissRequest = { setMenuExpanded(false) },
-                    onSelect = onStatusChange,
-                )
             }
-
             NavigationDrawerItem(
                 icon = { ArticleStatusIcon(status = articleStatus) },
                 label = {
@@ -147,27 +141,22 @@ fun FeedList(
 
         HorizontalDivider()
 
-        Surface(
-            color = MaterialTheme.colorScheme.surfaceContainerLow
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 12.dp, vertical = 8.dp),
+            horizontalArrangement = Arrangement.SpaceBetween
         ) {
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 12.dp, vertical = 8.dp),
-                horizontalArrangement = Arrangement.SpaceBetween,
-            ) {
-                IconButton(onClick = { onNavigateToSettings() }) {
-                    Icon(
-                        imageVector = Icons.Filled.Settings,
-                        contentDescription = stringResource(R.string.settings)
-                    )
+            ArticleStatusBar(
+                status = filter.status,
+                onSelectStatus = onSelectStatus,
+            )
+            AddFeedButton(
+                iconOnly = true,
+                onComplete = {
+                    onFeedAdded(it)
                 }
-                AddFeedButton(
-                    onComplete = {
-                        onFeedAdded(it)
-                    }
-                )
-            }
+            )
         }
     }
 }

app/src/main/java/com/capyreader/app/ui/articles/FilterAppBarTitle.kt

@@ -55,7 +55,6 @@ fun FilterAppBarTitle(
             overflow = TextOverflow.Ellipsis
         )
     }
-
 }
 
 @OptIn(ExperimentalMaterial3Api::class)

app/src/main/java/com/capyreader/app/ui/articles/list/FeedListTopBar.kt

@@ -81,7 +81,7 @@ fun FeedListTopBar(
                     contentAlignment = Alignment.Center
                 ) {
                     SearchTextField(
-                        value = search.query ?: "",
+                        value = search.query.orEmpty(),
                         onValueChange = {
                             search.update(it)
                             onSearchQueryChange()

app/src/main/res/values/strings.xml

@@ -227,4 +227,5 @@
     <string name="after_read_all_behavior_open_next_feed">Open Next Feed</string>
     <string name="full_content_error_missing_response">Failed to fetch article</string>
     <string name="full_content_error_generic">Failed to parse article</string>
+    <string name="feed_nav_drawer_title">Feeds</string>
 </resources>