Add logo on feed source list

androidApp/src/main/kotlin/com/prof18/feedflow/feedsourcelist/FeedSourceListScreen.android.kt

@@ -7,12 +7,14 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.prof18.feedflow.core.model.CategoryId
 import com.prof18.feedflow.core.model.FeedSource
 import com.prof18.feedflow.core.model.FeedSourceState
 import com.prof18.feedflow.presentation.FeedSourceListViewModel
 import com.prof18.feedflow.presentation.preview.feedSourcesState
+import com.prof18.feedflow.ui.components.FeedSourceLogoImage
 import com.prof18.feedflow.ui.feedsourcelist.FeedSourceNavBar
 import com.prof18.feedflow.ui.feedsourcelist.FeedSourcesWithCategoryList
 import com.prof18.feedflow.ui.feedsourcelist.NoFeedSourcesView
@@ -67,6 +69,12 @@ private fun FeedSourceListContent(
  modifier = Modifier
  .padding(paddingValues),
  feedSourceState = feedSources,
+ feedSourceImage = { imageUrl ->
+ FeedSourceLogoImage(
+ size = 24.dp,
+ imageUrl = imageUrl,
+ )
+ },
  onExpandClicked = onExpandClicked,
  onDeleteFeedSourceClick = onDeleteFeedSourceClick,
  )

androidApp/src/main/kotlin/com/prof18/feedflow/home/HomeScreen.android.kt

@@ -58,6 +58,7 @@ import com.prof18.feedflow.home.components.FeedItemImage
 import com.prof18.feedflow.home.components.HomeAppBar
 import com.prof18.feedflow.presentation.HomeViewModel
 import com.prof18.feedflow.presentation.preview.feedItemsForPreview
+import com.prof18.feedflow.ui.components.FeedSourceLogoImage
 import com.prof18.feedflow.ui.home.components.Drawer
 import com.prof18.feedflow.ui.home.components.EmptyFeedView
 import com.prof18.feedflow.ui.home.components.FeedItemView
@@ -118,6 +119,9 @@ internal fun HomeScreen(
  Drawer(
  navDrawerState = navDrawerState,
  currentFeedFilter = currentFeedFilter,
+ feedSourceImage = { imageUrl ->
+ FeedSourceImage(imageUrl)
+ },
  onFeedFilterSelected = { feedFilter ->
  homeViewModel.onFeedFilterSelected(feedFilter)
  scope.launch {
@@ -167,6 +171,9 @@ internal fun HomeScreen(
  .padding(paddingValues),
  navDrawerState = navDrawerState,
  currentFeedFilter = currentFeedFilter,
+ feedSourceImage = { imageUrl ->
+ FeedSourceImage(imageUrl)
+ },
  onFeedFilterSelected = { feedFilter ->
  homeViewModel.onFeedFilterSelected(feedFilter)
  scope.launch {
@@ -209,6 +216,9 @@ internal fun HomeScreen(
  .padding(paddingValues),
  navDrawerState = navDrawerState,
  currentFeedFilter = currentFeedFilter,
+ feedSourceImage = { imageUrl ->
+ FeedSourceImage(imageUrl)
+ },
  onFeedFilterSelected = { feedFilter ->
  homeViewModel.onFeedFilterSelected(feedFilter)
  scope.launch {
@@ -236,6 +246,14 @@ internal fun HomeScreen(
  }
 }
 
+@Composable
+private fun FeedSourceImage(imageUrl: String) {
+ FeedSourceLogoImage(
+ size = 24.dp,
+ imageUrl = imageUrl,
+ )
+}
+
 @Suppress("LongMethod")
 @Composable
 private fun HomeScaffold(

androidApp/src/main/kotlin/com/prof18/feedflow/ui/components/FeedSourceLogoImage.android.kt

@@ -0,0 +1,49 @@
+package com.prof18.feedflow.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Category
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.unit.Dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+import com.prof18.feedflow.ui.style.Spacing
+
+@Composable
+fun FeedSourceLogoImage(
+ modifier: Modifier = Modifier,
+ imageUrl: String,
+ size: Dp,
+) {
+ if (LocalInspectionMode.current) {
+ Box(
+ modifier = modifier
+ .size(size)
+ .background(Color.Green),
+ )
+ } else {
+ AsyncImage(
+ model = ImageRequest.Builder(LocalContext.current)
+ .data(imageUrl)
+ .crossfade(true)
+ .build(),
+ placeholder = rememberVectorPainter(Icons.Default.Category),
+ error = rememberVectorPainter(Icons.Default.Category),
+ contentDescription = null,
+ contentScale = ContentScale.Crop,
+ modifier = modifier
+ .size(size)
+ .clip(RoundedCornerShape(Spacing.small)),
+ )
+ }
+}

desktopApp/src/jvmMain/kotlin/com/prof18/feedflow/feedsourcelist/FeedSourceListScreen.desktop.kt

@@ -11,6 +11,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.DialogWindow
 import com.prof18.feedflow.MR
 import com.prof18.feedflow.addfeed.AddFeedScreen
@@ -21,6 +22,7 @@ import com.prof18.feedflow.desktopViewModel
 import com.prof18.feedflow.di.DI
 import com.prof18.feedflow.presentation.FeedSourceListViewModel
 import com.prof18.feedflow.presentation.preview.feedSourcesState
+import com.prof18.feedflow.ui.components.FeedSourceLogoImage
 import com.prof18.feedflow.ui.feedsourcelist.FeedSourceNavBar
 import com.prof18.feedflow.ui.feedsourcelist.FeedSourcesWithCategoryList
 import com.prof18.feedflow.ui.feedsourcelist.NoFeedSourcesView
@@ -93,6 +95,12 @@ private fun FeedSourceListContent(
  .padding(paddingValues),
  feedSourceState = feedSources,
  onExpandClicked = onExpandClicked,
+ feedSourceImage = { imageUrl ->
+ FeedSourceLogoImage(
+ size = 24.dp,
+ imageUrl = imageUrl,
+ )
+ },
  onDeleteFeedSourceClick = onDeleteFeedClick,
  )
  }

desktopApp/src/jvmMain/kotlin/com/prof18/feedflow/home/HomeScreen.desktop.kt

@@ -54,6 +54,7 @@ import com.prof18.feedflow.domain.model.FeedUpdateStatus
 import com.prof18.feedflow.domain.model.NoFeedSourcesStatus
 import com.prof18.feedflow.openInBrowser
 import com.prof18.feedflow.presentation.HomeViewModel
+import com.prof18.feedflow.ui.components.FeedSourceLogoImage
 import com.prof18.feedflow.ui.home.components.Drawer
 import com.prof18.feedflow.ui.home.components.EmptyFeedView
 import com.prof18.feedflow.ui.home.components.FeedItemView
@@ -152,6 +153,9 @@ private fun CompactView(
  Drawer(
  navDrawerState = navDrawerState,
  currentFeedFilter = currentFeedFilter,
+ feedSourceImage = { imageUrl ->
+ FeedSourceImage(imageUrl)
+ },
  onFeedFilterSelected = { feedFilter ->
  homeViewModel.onFeedFilterSelected(feedFilter)
  scope.launch {
@@ -226,6 +230,9 @@ private fun MediumView(
  .padding(paddingValues),
  navDrawerState = navDrawerState,
  currentFeedFilter = currentFeedFilter,
+ feedSourceImage = { imageUrl ->
+ FeedSourceImage(imageUrl)
+ },
  onFeedFilterSelected = { feedFilter ->
  homeViewModel.onFeedFilterSelected(feedFilter)
  },
@@ -289,6 +296,9 @@ private fun ExpandedView(
  .padding(paddingValues),
  navDrawerState = navDrawerState,
  currentFeedFilter = currentFeedFilter,
+ feedSourceImage = { imageUrl ->
+ FeedSourceImage(imageUrl)
+ },
  onFeedFilterSelected = { feedFilter ->
  homeViewModel.onFeedFilterSelected(feedFilter)
  },
@@ -324,6 +334,14 @@ private fun ExpandedView(
  }
 }
 
+@Composable
+private fun FeedSourceImage(imageUrl: String) {
+ FeedSourceLogoImage(
+ size = 24.dp,
+ imageUrl = imageUrl,
+ )
+}
+
 @Composable
 private fun HomeScreenContent(
  paddingValues: PaddingValues,

desktopApp/src/jvmMain/kotlin/com/prof18/feedflow/ui/components/FeedSourceLogoImage.desktop.kt

@@ -0,0 +1,51 @@
+package com.prof18.feedflow.ui.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Category
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.unit.Dp
+import com.prof18.feedflow.ui.style.Spacing
+import com.seiko.imageloader.rememberImagePainter
+
+@Composable
+fun FeedSourceLogoImage(
+ modifier: Modifier = Modifier,
+ imageUrl: String,
+ size: Dp,
+) {
+ if (LocalInspectionMode.current) {
+ Box(
+ modifier = modifier
+ .size(size)
+ .background(Color.Green),
+ )
+ } else {
+ Image(
+ painter = rememberImagePainter(
+ url = imageUrl,
+ errorPainter = {
+ rememberVectorPainter(Icons.Default.Category)
+ },
+ placeholderPainter = {
+ rememberVectorPainter(Icons.Default.Category)
+ },
+ ),
+ contentDescription = null,
+ contentScale = ContentScale.Crop,
+ modifier = modifier
+ .size(size)
+ .clip(RoundedCornerShape(Spacing.small)),
+ )
+ }
+}

iosApp/Source/App/Drawer/SidebarDrawer.swift

@@ -8,6 +8,7 @@
 
 import SwiftUI
 import shared
+import NukeUI
 
 struct SidebarDrawer: View {
 
@@ -66,7 +67,22 @@ struct SidebarDrawer: View {
  if let drawerFeedSource = drawerItem as? DrawerItem.DrawerFeedSource {
  HStack {
 
- Image(systemName: "square.stack.3d.up")
+ if let imageUrl = drawerFeedSource.feedSource.logoUrl {
+ LazyImage(url: URL(string: imageUrl)) { state in
+ if let image = state.image {
+ image
+ .resizable()
+ .scaledToFill()
+ .frame(width: 24, height: 24)
+ .cornerRadius(16)
+ .clipped()
+ } else {
+ Image(systemName: "square.stack.3d.up")
+ }
+ }
+ } else {
+ Image(systemName: "square.stack.3d.up")
+ }
 
  Text(drawerFeedSource.feedSource.title)
  .lineLimit(2)

iosApp/Source/Settings/Feeds/FeedSourceListScreen.swift

@@ -9,6 +9,7 @@
 import SwiftUI
 import shared
 import KMPNativeCoroutinesAsync
+import NukeUI
 
 struct FeedSourceListScreen: View {
 
@@ -68,19 +69,41 @@ private struct FeedSourceListContent: View {
  DisclosureGroup(
  content: {
  ForEach(feedSourceState.feedSources, id: \.self.id) { feedSource in
- VStack(alignment: .leading) {
- Text(feedSource.title)
- .font(.system(size: 16))
- .padding(.top, Spacing.regular)
- .padding(.bottom, 2)
 
- Text(feedSource.url)
- .font(.system(size: 12))
- .padding(.top, 0)
- .padding(.bottom, Spacing.regular)
+ HStack {
+
+ if let imageUrl = feedSource.logoUrl {
+ LazyImage(url: URL(string: imageUrl)) { state in
+ if let image = state.image {
+ image
+ .resizable()
+ .scaledToFill()
+ .frame(width: 24, height: 24)
+ .cornerRadius(16)
+ .clipped()
+ } else {
+ Image(systemName: "square.stack.3d.up")
+ }
+ }
+ } else {
+ Image(systemName: "square.stack.3d.up")
+ }
+
+ VStack(alignment: .leading) {
+ Text(feedSource.title)
+ .font(.system(size: 16))
+ .padding(.top, Spacing.regular)
+ .padding(.bottom, 2)
 
+ Text(feedSource.url)
+ .font(.system(size: 12))
+ .padding(.top, 0)
+ .padding(.bottom, Spacing.regular)
+
+ }
+ .padding(.leading, Spacing.small)
  }
- .padding(.horizontal, Spacing.small)
+ .padding(.trailing, Spacing.small)
  .id(feedSource.id)
  .contextMenu {
  Button {