Redesign feeds bottom sheet UI/UX (#426)

* Update pinned feeds header UI and make it collapsible

* Update all feeds section header UI

* Show divider between pinned and feeds sections

* Pass pinned feed expanded state through header type

* Add query to get all feeds count

* Show feeds count in all feeds header

* Add query to load pinned feeds

* Load pinned feeds in a separate section in expanded feeds sheet

* Redesign search bar in feeds bottom sheet

* Show pinned feeds section if search query length is less than min required

* Redesign feed list item

* Add support for sorting feeds query dynamically

* Remove navigation icon from feeds search bar

* Add util class for having 4 items as a tuple

* Add support for sorting feeds

* Change feeds section divider color to tinted surface

* Add support for switching feeds view mode

* Track feeds view mode in preferences

* Fix no top padding for feeds search results

* Track feeds sort order in preferences

* Breakdown pinned feeds, all feeds & feeds search results into separate flows

* Fix expand/collapse icon in pinned feed header

* Add event to handle home bottom bar selection

* Add home bottom bar item as sticky header in the bottom bar

* Remove old `FeedsSheetBottomBar`

* Use `items` DSL instead of for loop in feeds bottom sheet

* Stop setting header type via the paging data

Since paging data refresh can cause headers to blink as well when expanding and collapsing, I have removed that and instead setting the header directly in the grid

* Remove number of pinned feeds count from `FeedsState`

* Fix unread posts count visibility setting not working

* Remove unused code

* Fix feeds bottom sheet spacings

* Add new feeds sheet bottom for adding feeds and creating groups

resources/icons/src/commonMain/kotlin/dev/sasikanth/rss/reader/resources/icons/NewGroup.kt

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2024 Sasikanth Miriyampalli
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package dev.sasikanth.rss.reader.resources.icons
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.EvenOdd
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+
+val TwineIcons.NewGroup: ImageVector
+  get() {
+    if (newGroup != null) {
+      return newGroup!!
+    }
+    newGroup =
+      Builder(
+          name = "NewGroup",
+          defaultWidth = 24.0.dp,
+          defaultHeight = 24.0.dp,
+          viewportWidth = 24.0f,
+          viewportHeight = 24.0f
+        )
+        .apply {
+          path(
+            fill = SolidColor(Color(0xFF171D19)),
+            stroke = null,
+            strokeLineWidth = 0.0f,
+            strokeLineCap = Butt,
+            strokeLineJoin = Miter,
+            strokeLineMiter = 4.0f,
+            pathFillType = EvenOdd
+          ) {
+            moveTo(5.0f, 5.0f)
+            horizontalLineTo(9.0f)
+            verticalLineTo(9.0f)
+            horizontalLineTo(5.0f)
+            verticalLineTo(5.0f)
+            close()
+            moveTo(3.0f, 5.0f)
+            curveTo(3.0f, 3.8954f, 3.8954f, 3.0f, 5.0f, 3.0f)
+            horizontalLineTo(9.0f)
+            curveTo(10.1046f, 3.0f, 11.0f, 3.8954f, 11.0f, 5.0f)
+            verticalLineTo(9.0f)
+            curveTo(11.0f, 10.1046f, 10.1046f, 11.0f, 9.0f, 11.0f)
+            horizontalLineTo(5.0f)
+            curveTo(3.8954f, 11.0f, 3.0f, 10.1046f, 3.0f, 9.0f)
+            verticalLineTo(5.0f)
+            close()
+            moveTo(15.0f, 5.0f)
+            horizontalLineTo(19.0f)
+            verticalLineTo(9.0f)
+            horizontalLineTo(15.0f)
+            verticalLineTo(5.0f)
+            close()
+            moveTo(13.0f, 5.0f)
+            curveTo(13.0f, 3.8954f, 13.8954f, 3.0f, 15.0f, 3.0f)
+            horizontalLineTo(19.0f)
+            curveTo(20.1046f, 3.0f, 21.0f, 3.8954f, 21.0f, 5.0f)
+            verticalLineTo(9.0f)
+            curveTo(21.0f, 10.1046f, 20.1046f, 11.0f, 19.0f, 11.0f)
+            horizontalLineTo(15.0f)
+            curveTo(13.8954f, 11.0f, 13.0f, 10.1046f, 13.0f, 9.0f)
+            verticalLineTo(5.0f)
+            close()
+            moveTo(9.0f, 15.0f)
+            horizontalLineTo(5.0f)
+            verticalLineTo(19.0f)
+            horizontalLineTo(9.0f)
+            verticalLineTo(15.0f)
+            close()
+            moveTo(5.0f, 13.0f)
+            curveTo(3.8954f, 13.0f, 3.0f, 13.8954f, 3.0f, 15.0f)
+            verticalLineTo(19.0f)
+            curveTo(3.0f, 20.1046f, 3.8954f, 21.0f, 5.0f, 21.0f)
+            horizontalLineTo(9.0f)
+            curveTo(10.1046f, 21.0f, 11.0f, 20.1046f, 11.0f, 19.0f)
+            verticalLineTo(15.0f)
+            curveTo(11.0f, 13.8954f, 10.1046f, 13.0f, 9.0f, 13.0f)
+            horizontalLineTo(5.0f)
+            close()
+            moveTo(16.0f, 14.0f)
+            curveTo(16.0f, 13.4477f, 16.4477f, 13.0f, 17.0f, 13.0f)
+            curveTo(17.5523f, 13.0f, 18.0f, 13.4477f, 18.0f, 14.0f)
+            verticalLineTo(16.0f)
+            horizontalLineTo(20.0f)
+            curveTo(20.5523f, 16.0f, 21.0f, 16.4477f, 21.0f, 17.0f)
+            curveTo(21.0f, 17.5523f, 20.5523f, 18.0f, 20.0f, 18.0f)
+            horizontalLineTo(18.0f)
+            verticalLineTo(20.0f)
+            curveTo(18.0f, 20.5523f, 17.5523f, 21.0f, 17.0f, 21.0f)
+            curveTo(16.4477f, 21.0f, 16.0f, 20.5523f, 16.0f, 20.0f)
+            verticalLineTo(18.0f)
+            horizontalLineTo(14.0f)
+            curveTo(13.4477f, 18.0f, 13.0f, 17.5523f, 13.0f, 17.0f)
+            curveTo(13.0f, 16.4477f, 13.4477f, 16.0f, 14.0f, 16.0f)
+            horizontalLineTo(16.0f)
+            verticalLineTo(14.0f)
+            close()
+          }
+        }
+        .build()
+    return newGroup!!
+  }
+
+private var newGroup: ImageVector? = null

resources/strings/src/commonMain/kotlin/dev/sasikanth/rss/reader/resources/strings/DeTwineStrings.kt

@@ -90,8 +90,8 @@ val DeTwineStrings =
     aboutSocialThreads = "Threads",
     aboutSocialGitHub = "GitHub",
     aboutSocialWebsite = "Webseite",
-    feedsSearchHint = "Suche nach Feeds",
-    allFeeds = "Alle Feeds",
+    feedsSearchHint = "Filter",
+    allFeeds = "Feeds",
     pinnedFeeds = "Angepinnt",
     openWebsite = "Website öffnen",
     markAllAsRead = "Alle als gelesen markieren",
@@ -130,5 +130,10 @@ val DeTwineStrings =
         1L -> "$numberOfUnreadPosts ungelesener Beitrag"
         else -> "$numberOfUnreadPosts ungelesene Beiträge"
       }
-    }
+    },
+    feedsSortLatest = "Zuletzt hinzugefügt",
+    feedsSortOldest = "Zuerst hinzugefügt",
+    feedsSortAlphabetical = "A-Z",
+    feedsBottomBarNewGroup = "Neue Gruppe",
+    feedsBottomBarNewFeed = "Neuer Feed"
   )

resources/strings/src/commonMain/kotlin/dev/sasikanth/rss/reader/resources/strings/EnTwineStrings.kt

@@ -98,8 +98,8 @@ val EnTwineStrings =
     aboutSocialThreads = "Threads",
     aboutSocialGitHub = "GitHub",
     aboutSocialWebsite = "Website",
-    feedsSearchHint = "Search feeds",
-    allFeeds = "All Feeds",
+    feedsSearchHint = "Filter",
+    allFeeds = "Feeds",
     pinnedFeeds = "Pinned",
     openWebsite = "Open Website",
     markAllAsRead = "Mark All as Read",
@@ -137,5 +137,10 @@ val EnTwineStrings =
         1L -> "$numberOfUnreadPosts unread article"
         else -> "$numberOfUnreadPosts unread articles"
       }
-    }
+    },
+    feedsSortLatest = "Last added",
+    feedsSortOldest = "First added",
+    feedsSortAlphabetical = "A-Z",
+    feedsBottomBarNewGroup = "New group",
+    feedsBottomBarNewFeed = "New feed"
   )

resources/strings/src/commonMain/kotlin/dev/sasikanth/rss/reader/resources/strings/TrTwineStrings.kt

@@ -86,8 +86,8 @@ val TrTwineStrings =
     aboutSocialThreads = "Threads",
     aboutSocialGitHub = "GitHub",
     aboutSocialWebsite = "Web sitesi",
-    feedsSearchHint = "İçerikleri ara",
-    allFeeds = "Tüm içerikler",
+    feedsSearchHint = "Filtre",
+    allFeeds = "Içerikler",
     pinnedFeeds = "Sabitlenmiş",
     openWebsite = "Web sitesini aç",
     markAllAsRead = "Tümünü okundu olarak işaretle",
@@ -126,5 +126,10 @@ val TrTwineStrings =
         1L -> "$numberOfUnreadPosts okunmamış makale"
         else -> "$numberOfUnreadPosts okunmamış makaleler"
       }
-    }
+    },
+    feedsSortLatest = "En son eklenmiş",
+    feedsSortOldest = "İlk eklenen",
+    feedsSortAlphabetical = "A-Z",
+    feedsBottomBarNewGroup = "Yeni Grup",
+    feedsBottomBarNewFeed = "Yeni besleme"
   )

resources/strings/src/commonMain/kotlin/dev/sasikanth/rss/reader/resources/strings/TwineStrings.kt

@@ -122,7 +122,12 @@ data class TwineStrings(
   val feedOptionRemove: String,
   val feedTitleHint: String,
   val noUnreadPostsInFeed: String,
-  val numberOfUnreadPostsInFeed: (Long) -> String
+  val numberOfUnreadPostsInFeed: (Long) -> String,
+  val feedsSortLatest: String,
+  val feedsSortOldest: String,
+  val feedsSortAlphabetical: String,
+  val feedsBottomBarNewGroup: String,
+  val feedsBottomBarNewFeed: String,
 )
 
 object Locales {

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/feeds/FeedsEvent.kt

@@ -17,6 +17,7 @@ package dev.sasikanth.rss.reader.feeds
 
 import androidx.compose.ui.text.input.TextFieldValue
 import dev.sasikanth.rss.reader.core.model.local.Feed
+import dev.sasikanth.rss.reader.repository.FeedsOrderBy
 
 sealed interface FeedsEvent {
 
@@ -37,4 +38,12 @@ sealed interface FeedsEvent {
   data object ClearSearchQuery : FeedsEvent
 
   data class OnFeedInfoClick(val feedLink: String) : FeedsEvent
+
+  data class OnFeedSortOrderChanged(val feedsOrderBy: FeedsOrderBy) : FeedsEvent
+
+  data object OnChangeFeedsViewModeClick : FeedsEvent
+
+  data object TogglePinnedSection : FeedsEvent
+
+  data object OnHomeSelected : FeedsEvent
 }