From 54489944ddf3e75b451824978dd55aa5b576ed82 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 16 Apr 2024 15:34:43 +0800
Subject: [PATCH] feat: picture item

---
 .../components/entry-column/article-item.tsx  |  2 +-
 .../src/components/entry-column/index.tsx     | 11 +++++--
 .../components/entry-column/picture-item.tsx  | 32 +++++++++++++++++++
 .../entry-column/social-media-item.tsx        |  2 +-
 src/renderer/src/lib/entries.ts               |  4 +--
 src/renderer/src/pages/index.tsx              |  8 +++--
 6 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/renderer/src/components/entry-column/picture-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 1bc3a4398..846d54da5 100644
--- a/src/renderer/src/components/entry-column/article-item.tsx
+++ b/src/renderer/src/components/entry-column/article-item.tsx
@@ -6,7 +6,7 @@ export function ArticleItem({
   entry: any,
 }) {
   return (
-    <div className='flex px-2 py-3'>
+    <div className='flex my-5 px-2 py-3'>
       <img
         src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
         className="w-5 h-5 mr-2 rounded-sm shrink-0"
diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
index 1a525521e..ad246181b 100644
--- a/src/renderer/src/components/entry-column/index.tsx
+++ b/src/renderer/src/components/entry-column/index.tsx
@@ -4,6 +4,7 @@ import { m } from 'framer-motion'
 import { cn } from '@renderer/lib/utils'
 import { ArticleItem } from './article-item'
 import { SocialMediaItem } from './social-media-item'
+import { PictureItem } from './picture-item'
 
 export function EntryColumn({
   activedList,
@@ -27,13 +28,16 @@ export function EntryColumn({
     case 'Social Media':
       Item = SocialMediaItem
       break
+    case 'Pictures':
+      Item = PictureItem
+      break
     default:
       Item = ArticleItem
   }
 
   return (
     <div className='px-2' onClick={() => setActivedEntry(null)}>
-      <div className="ml-9">
+      <div className="ml-9 mb-5">
         <div className="font-bold text-lg">{activedList?.name}</div>
         <div className="text-xs font-medium text-zinc-400">
           {entries.data?.pages?.[0].total} Items
@@ -51,11 +55,14 @@ export function EntryColumn({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
+            className={cn(
+              activedList?.type === 'Pictures' && 'grid gap-2 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 px-2'
+            )}
           >
             {page.entries.map((entry) => (
               <div
                 key={entry.id}
-                className={cn("mt-5 rounded-md cursor-pointer", activedEntry === entry.id && 'bg-[#DEDDDC]')}
+                className={cn("rounded-md cursor-pointer", activedEntry === entry.id && 'bg-[#DEDDDC]')}
                 onClick={(e) => {
                   e.stopPropagation()
                   setActivedEntry(entry.id)
diff --git a/src/renderer/src/components/entry-column/picture-item.tsx b/src/renderer/src/components/entry-column/picture-item.tsx
new file mode 100644
index 000000000..1f626a010
--- /dev/null
+++ b/src/renderer/src/components/entry-column/picture-item.tsx
@@ -0,0 +1,32 @@
+import dayjs from '@renderer/lib/dayjs'
+
+export function PictureItem({
+  entry,
+}: {
+  entry: any,
+}) {
+  return (
+    <div className='flex'>
+      <div>
+        <div className='flex gap-2 overflow-x-auto'>
+          {entry.images?.slice(0, 1).map((image) => (
+            <img
+              key={image}
+              src={image}
+              className="w-full aspect-square shrink-0 rounded object-cover"
+              loading="lazy"
+            />
+          ))}
+        </div>
+        <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="text-zinc-500 text-[13px]">
+            {dayjs
+              .duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
+              .humanize()}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/entry-column/social-media-item.tsx b/src/renderer/src/components/entry-column/social-media-item.tsx
index 8a102c239..9d3d1d146 100644
--- a/src/renderer/src/components/entry-column/social-media-item.tsx
+++ b/src/renderer/src/components/entry-column/social-media-item.tsx
@@ -6,7 +6,7 @@ export function SocialMediaItem({
   entry: any,
 }) {
   return (
-    <div className='flex px-2 py-3'>
+    <div className='flex my-5 px-2 py-3'>
       <img
         src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
         className="w-5 h-5 mr-2 rounded-sm shrink-0"
diff --git a/src/renderer/src/lib/entries.ts b/src/renderer/src/lib/entries.ts
index d1757dacf..8985daf45 100644
--- a/src/renderer/src/lib/entries.ts
+++ b/src/renderer/src/lib/entries.ts
@@ -18,7 +18,7 @@ export const useEntries = ({
       if (level === levels.folder) {
         entries = await (await fetch(`${import.meta.env.VITE_MINIFLUX_ENDPOINT}/v1/entries?` + new URLSearchParams({
           direction: 'desc',
-          limit: '10',
+          limit: '20',
           after_entry_id: pageParam,
           category_id: id + '',
         }), {
@@ -29,7 +29,7 @@ export const useEntries = ({
       } else if (level === levels.type) {
         entries = await (await fetch(`${import.meta.env.VITE_MINIFLUX_ENDPOINT}/v1/entries?` + new URLSearchParams({
           direction: 'desc',
-          limit: '10',
+          limit: '20',
           after_entry_id: pageParam,
           category_id: typeMap[id as string][0] + '',
         }), {
diff --git a/src/renderer/src/pages/index.tsx b/src/renderer/src/pages/index.tsx
index 32765fe8d..827c019c9 100644
--- a/src/renderer/src/pages/index.tsx
+++ b/src/renderer/src/pages/index.tsx
@@ -4,6 +4,8 @@ import { useState } from 'react'
 import { ActivedList } from '@renderer/lib/types'
 import { cn } from '@renderer/lib/utils'
 
+const wideMode = ['Social Media', 'Pictures', 'Videos', 'Audios']
+
 export function Component() {
   const [activedList, setActivedList] = useState<ActivedList>({
     level: 'type',
@@ -18,10 +20,12 @@ export function Component() {
       <div className="w-64 pt-10 border-r shrink-0 bg-[#E1E0DF]">
         <FeedColumn activedList={activedList} setActivedList={setActivedList} />
       </div>
-      <div className={cn("pt-10 border-r shrink-0 h-full overflow-y-auto", activedList?.type === "Social Media" ? "flex-1 min-w-96" : "w-[340px]")}>
+      <div className={cn("pt-10 border-r shrink-0 h-full overflow-y-auto", wideMode.includes(activedList?.type || '') ? "flex-1" : "w-[340px]")}>
         <EntryColumn activedList={activedList} activedEntry={activedEntry} setActivedEntry={setActivedEntry} />
       </div>
-      <div className="flex-1 pt-10 px-4">Three</div>
+      {!wideMode.includes(activedList?.type || '') && (
+        <div className="flex-1 pt-10 px-4">Three</div>
+      )}
     </div>
   )
 }