From 563faf0882d24f69a236ebb302bf4a8009cfb66e Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 14 May 2024 18:52:59 +0800
Subject: [PATCH] feat: use feed image as feed icon

---
 .../components/entry-column/article-item.tsx  |  4 +--
 .../src/components/feed-column/list.tsx       |  4 +--
 src/renderer/src/components/feed-icon.tsx     | 33 +++++++++++++++++++
 src/renderer/src/components/feed-summary.tsx  | 21 ++++--------
 4 files changed, 43 insertions(+), 19 deletions(-)
 create mode 100644 src/renderer/src/components/feed-icon.tsx

diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
index 902e6a0a4..ede01f946 100644
--- a/src/renderer/src/components/entry-column/article-item.tsx
+++ b/src/renderer/src/components/entry-column/article-item.tsx
@@ -1,12 +1,12 @@
 import dayjs from "@renderer/lib/dayjs"
-import { SiteIcon } from "../site-icon"
 import { EntriesResponse } from "@renderer/lib/types"
 import { Image } from "@renderer/components/ui/image"
+import { FeedIcon } from "@renderer/components/feed-icon"
 
 export function ArticleItem({ entry }: { entry: EntriesResponse[number] }) {
   return (
     <div className="flex my-5 px-2 py-3">
-      <SiteIcon url={entry.feeds.siteUrl} />
+      <FeedIcon feed={entry.feeds} />
       <div className="line-clamp-5 text-sm flex-1 -mt-0.5 leading-tight">
         <div className="text-zinc-500 text-[10px] space-x-1">
           <span>{entry.feeds.title}</span>
diff --git a/src/renderer/src/components/feed-column/list.tsx b/src/renderer/src/components/feed-column/list.tsx
index d0aa99da4..75dc59626 100644
--- a/src/renderer/src/components/feed-column/list.tsx
+++ b/src/renderer/src/components/feed-column/list.tsx
@@ -8,7 +8,6 @@ import { useState } from "react"
 import { levels, views } from "@renderer/lib/constants"
 import { ActivedList, SubscriptionResponse } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
-import { SiteIcon } from "../site-icon"
 import { Response as SubscriptionsResponse } from "@renderer/lib/queries/subscriptions"
 import { FeedContextMenu } from "./context-menu"
 import {
@@ -17,6 +16,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@renderer/components/ui/tooltip"
+import { FeedIcon } from "@renderer/components/feed-icon"
 
 export function FeedList({
   className,
@@ -171,7 +171,7 @@ function FeedCategory({
                   }}
                 >
                   <div className="flex items-center min-w-0">
-                    <SiteIcon url={feed.feeds.siteUrl} className="w-4 h-4" />
+                    <FeedIcon feed={feed.feeds} className="w-4 h-4" />
                     <div className="truncate">{feed.feeds.title}</div>
                     {feed.isPrivate && (
                       <TooltipProvider delayDuration={300}>
diff --git a/src/renderer/src/components/feed-icon.tsx b/src/renderer/src/components/feed-icon.tsx
new file mode 100644
index 000000000..5b4d67ae2
--- /dev/null
+++ b/src/renderer/src/components/feed-icon.tsx
@@ -0,0 +1,33 @@
+import { FeedResponse } from "@renderer/lib/types"
+import { SiteIcon } from "@renderer/components/site-icon"
+import { Image } from "@renderer/components/ui/image"
+import { cn } from "@renderer/lib/utils"
+
+export function FeedIcon({
+  feed,
+  fallbackUrl,
+  className,
+}: {
+  feed: FeedResponse
+  fallbackUrl?: string
+  className?: string
+}) {
+  if (feed.image) {
+    return (
+      <Image
+        src={feed.image}
+        className={cn("w-5 h-5 mr-2 rounded-sm shrink-0", className)}
+        proxy={{
+          width: 40,
+          height: 40,
+        }}
+      />
+    )
+  } else if (feed.siteUrl) {
+    return <SiteIcon url={feed.siteUrl} className={className} />
+  } else if (fallbackUrl) {
+    return <SiteIcon url={fallbackUrl} className={className} />
+  } else {
+    return null
+  }
+}
diff --git a/src/renderer/src/components/feed-summary.tsx b/src/renderer/src/components/feed-summary.tsx
index 8b3bdeaf1..b06cd9ecb 100644
--- a/src/renderer/src/components/feed-summary.tsx
+++ b/src/renderer/src/components/feed-summary.tsx
@@ -1,6 +1,5 @@
 import { FeedResponse } from "@renderer/lib/types"
-import { SiteIcon } from "@renderer/components/site-icon"
-import { Image } from "@renderer/components/ui/image"
+import { FeedIcon } from "@renderer/components/feed-icon"
 
 export function FollowSummary({
   feed,
@@ -12,19 +11,11 @@ export function FollowSummary({
   return (
     <div className="select-text text-sm space-y-1 max-w-[462px]">
       <a href={feed.siteUrl} target="_blank" className="flex items-center">
-        {(() => {
-          if (feed.image) {
-            return <Image src={feed.image} className="w-8 h-8 mr-2 shrink-0" />
-          } else if (feed.siteUrl) {
-            return <SiteIcon url={feed.siteUrl} className="w-8 h-8 shrink-0" />
-          } else if (docs) {
-            return (
-              <SiteIcon url="https://rsshub.app" className="w-8 h-8 shrink-0" />
-            )
-          } else {
-            return null
-          }
-        })()}
+        <FeedIcon
+          feed={feed}
+          fallbackUrl={docs}
+          className="w-8 h-8 mr-2 shrink-0"
+        />
         <div className="leading-tight font-semibold text-base truncate">
           {feed.title}
           <div className="font-normal truncate text-xs text-zinc-500">