From 7555a178284552f548c0cf89999b40ce84b04bfd Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 16 Apr 2024 17:03:36 +0800
Subject: [PATCH] feat: display title and icon; notification item

---
 .../components/entry-column/article-item.tsx  | 16 +++++++-----
 .../src/components/entry-column/index.tsx     |  4 +++
 .../entry-column/notification-item.tsx        | 26 +++++++++++++++++++
 .../components/entry-column/picture-item.tsx  |  4 ++-
 .../components/entry-column/video-item.tsx    |  2 ++
 5 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/src/components/entry-column/notification-item.tsx

diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
index 709a4b2dd..d0af5bd3d 100644
--- a/src/renderer/src/components/entry-column/article-item.tsx
+++ b/src/renderer/src/components/entry-column/article-item.tsx
@@ -10,13 +10,17 @@ export function ArticleItem({
     <div className='flex my-5 px-2 py-3'>
       <SiteIcon url={entry.feed.site_url} />
       <div className="line-clamp-5 text-sm flex-1 -mt-0.5 leading-tight">
-        <div className="text-zinc-500 text-[13px]">
-          {dayjs
-            .duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
-            .humanize()}
+        <div className='text-zinc-500 text-[10px] space-x-1'>
+          <span>{entry.feed.title}</span>
+          <span>·</span>
+          <span>
+            {dayjs
+              .duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
+              .humanize()}
+          </span>
         </div>
-        <div className="font-medium">{entry.title}</div>
-        <div className="text-zinc-500 text-[13px] mt-0.5">{entry.text}</div>
+        <div className="font-medium my-0.5">{entry.title}</div>
+        <div className="text-zinc-500 text-[13px]">{entry.text}</div>
       </div>
       {entry.images?.[0] && (
         <img
diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
index 105fc9ffe..f835ccbb9 100644
--- a/src/renderer/src/components/entry-column/index.tsx
+++ b/src/renderer/src/components/entry-column/index.tsx
@@ -6,6 +6,7 @@ import { ArticleItem } from './article-item'
 import { SocialMediaItem } from './social-media-item'
 import { PictureItem } from './picture-item'
 import { VideoItem } from './video-item'
+import { NotificationItem } from './notification-item'
 
 const gridMode = ['Pictures', 'Videos']
 
@@ -37,6 +38,9 @@ export function EntryColumn({
     case 'Videos':
       Item = VideoItem
       break
+    case 'Notifications':
+      Item = NotificationItem
+      break
     default:
       Item = ArticleItem
   }
diff --git a/src/renderer/src/components/entry-column/notification-item.tsx b/src/renderer/src/components/entry-column/notification-item.tsx
new file mode 100644
index 000000000..3075795ca
--- /dev/null
+++ b/src/renderer/src/components/entry-column/notification-item.tsx
@@ -0,0 +1,26 @@
+import dayjs from '@renderer/lib/dayjs'
+import { SiteIcon } from '../site-icon'
+
+export function NotificationItem({
+  entry,
+}: {
+  entry: any,
+}) {
+  return (
+    <div className='flex my-5 px-2 py-3'>
+      <SiteIcon url={entry.feed.site_url} />
+      <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.feed.title}</span>
+          <span>·</span>
+          <span>
+            {dayjs
+              .duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
+              .humanize()}
+          </span>
+        </div>
+        <div className="my-0.5">{entry.title}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/entry-column/picture-item.tsx b/src/renderer/src/components/entry-column/picture-item.tsx
index 115469887..962d2c1f8 100644
--- a/src/renderer/src/components/entry-column/picture-item.tsx
+++ b/src/renderer/src/components/entry-column/picture-item.tsx
@@ -1,4 +1,5 @@
 import dayjs from '@renderer/lib/dayjs'
+import { SiteIcon } from '../site-icon'
 
 export function PictureItem({
   entry,
@@ -21,7 +22,8 @@ export function PictureItem({
         <div className="line-clamp-5 text-sm flex-1 px-2 pb-3 pt-1">
           <div className="font-medium line-clamp-2">{entry.title}</div>
           <div className='space-x-1 text-[13px]'>
-            <span>{entry.author}</span>
+            <SiteIcon className='w-3.5 h-3.5 inline-block mr-0 align-sub' url={entry.feed.site_url} />
+            <span>{entry.feed.title}</span>
             <span className="text-zinc-500">·</span>
             <span className="text-zinc-500">
               {dayjs
diff --git a/src/renderer/src/components/entry-column/video-item.tsx b/src/renderer/src/components/entry-column/video-item.tsx
index e47682e93..aa031e089 100644
--- a/src/renderer/src/components/entry-column/video-item.tsx
+++ b/src/renderer/src/components/entry-column/video-item.tsx
@@ -1,4 +1,5 @@
 import dayjs from '@renderer/lib/dayjs'
+import { SiteIcon } from '../site-icon'
 
 export function VideoItem({
   entry,
@@ -21,6 +22,7 @@ export function VideoItem({
         <div className="line-clamp-5 text-sm flex-1 px-2 pb-3 pt-1">
           <div className="font-medium line-clamp-2">{entry.title}</div>
           <div className='space-x-1 text-[13px]'>
+            <SiteIcon className='w-3.5 h-3.5 inline-block mr-0 align-sub' url={entry.feed.site_url} />
             <span>{entry.author}</span>
             <span className="text-zinc-500">·</span>
             <span className="text-zinc-500">