fix: add Hackernews and Lobsters sources to FeedItemSource and update styles for source display

Author: medyo

src/features/feed/components/FeedItemSource.tsx

@@ -1,10 +1,11 @@
+import { memo, useState } from 'react'
 import { FaDev, FaMediumM, FaReddit } from 'react-icons/fa'
 import { GoDotFill } from 'react-icons/go'
-import { SiGithub, SiProducthunt } from 'react-icons/si'
+import { SiGithub, SiProducthunt, SiYcombinator } from 'react-icons/si'
 import HashNodeIcon from 'src/assets/icon_hashnode.png'
-const FeedItemKV: {
-  [key: string]: React.ReactNode
-} = {
+import LobstersIcon from 'src/assets/icon_lobsters.png'
+
+const SOURCE_MAP: Record<string, React.ReactNode> = {
   producthunt: (
     <>
       <SiProducthunt color="#D65736" /> Product hunt
@@ -35,13 +36,43 @@ const FeedItemKV: {
       <img alt="hn" className="feedItemSource" src={HashNodeIcon} /> Hashnode
     </>
   ),
+  hackernews: (
+    <>
+      <SiYcombinator color="#FB6720" /> Hackernews
+    </>
+  ),
+  lobsters: (
+    <>
+      <img alt="lobsters" className="feedItemSource" src={LobstersIcon} /> Lobsters
+    </>
+  ),
 }
-export const FeedItemSource = ({ source }: { source: string }) => {
-  return (
-    FeedItemKV[source] || (
+export const FeedItemSource = memo(({ source }: { source: string }) => {
+  const [fallback, setFallback] = useState(false)
+
+  if (SOURCE_MAP[source]) {
+    return SOURCE_MAP[source]
+  }
+
+  if (!fallback && source.includes('.')) {
+    return (
       <>
-        <GoDotFill className="rowItemIcon" /> {source}
+        <img
+          src={`https://icons.duckduckgo.com/ip3/${source}.ico`}
+          alt={source}
+          className="feedItemSourceFallback"
+          onError={() => {
+            setFallback(true)
+          }}
+        />{' '}
+        <span className="sourceName">{source}</span>
       </>
     )
+  }
+
+  return (
+    <>
+      <GoDotFill className="rowItemIcon" /> <span className="sourceName">{source}</span>
+    </>
   )
-}
+})

src/features/feed/components/feed.css

@@ -130,3 +130,16 @@
   margin: 0;
   padding: 0;
 }
+
+.sourceName {
+  text-transform: none;
+
+  &::first-letter {
+    text-transform: capitalize;
+  }
+}
+
+.feedItemSourceFallback {
+  width: 12px;
+  height: 12px;
+}

src/features/feed/components/feedItems/ArticleFeedItem.tsx

@@ -20,14 +20,14 @@ export const ArticleFeedItem = (props: BaseItemPropsType<ArticleFeedItemData>) =
             <FeedItemHeader {...item} />
             {listingMode === 'compact' && (
               <div className="rowDetails">
-                <span className="rowItem capitalize verticalAligned">
+                <span className="rowItem feedSource verticalAligned">
                   <FeedItemSource source={item.source} />
                 </span>
               </div>
             )}
             {listingMode === 'normal' && (
               <div className="rowDetails">
-                <span className="rowItem capitalize verticalAligned">
+                <span className="rowItem feedSource verticalAligned">
                   <FeedItemSource source={item.source} />
                 </span>
                 <span className="rowItem" title={new Date(item.date).toUTCString()}>